Javascript 跨浏览器偏移网络宽度

在不同的浏览器中使用offsetWidth时，我遇到了一个问题。这种结果上的差异导致了一些奇怪的布局。我创建了一个非常小的示例来显示我所看到的

HTML

<table id="tbl">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>
<button onclick="calc()">Calculate Offset Width</button>

<div>Cell 1 offsetWidth: <span id="c1offWidth"></span></div>

CSS

当我在chrome、safari和opera上运行时，单元格1的偏移宽度返回的值是72。当我在firefox和IE9-10上运行时，返回的值是77

我觉得这是计算元素宽度（包括填充和边框）的最佳方法

是否存在始终返回相同结果的跨浏览器解决方案？我尝试使用jQuery，但结果更令人困惑

编辑 因为每个人都在推荐外套，我也为此做了一个jsbin。不同浏览器的结果仍然不同。铬返回36；IE9-10和Firefox返回39

---

偏移网络宽度

在跨浏览器时不可靠。我建议改用jQuery

---

请参阅。

如果您需要获得跨浏览器计算的宽度，包括边框和边距等内容，则可以使用jQuery。

由于您使用jQuery标记了文章，我认为jQuery解决方案是可以接受的。你怎么了

例如：

function calc()
{
    var the_width = $('#tbl tr:eq(0) td:eq(0)').outerWidth();
    $('#c1offWidth').html(the_width);   
}

使用jQuery给表带来了许多好处（正如您可以看到的，上面所需的代码量减少了）。还应该考虑使用非侵入式事件处理程序。例如，从

按钮

中删除

onclick

属性，然后执行以下操作：

$(function() {  
    $('button').click(function() {  
        var the_width = $('#tbl tr:eq(0) td:eq(0)').outerWidth();
        $('#c1offWidth').html(the_width);  
    });
});

---

请参阅。

您的示例中的实际问题在于不同的浏览器使用不同的默认字体进行渲染。单元格的框大小由内容定义。 如果您为元素设置了明确的宽度（如其中一条注释中正确说明的），您将得到明确且相等的结果

---

ps：不能发表评论…

jQuery解决方案绝对可以接受！不幸的是，这个演示在Chrome中返回了36个，在IE中返回了39个。这似乎并不能解决问题，它在Firefox中也返回了39px。这不是函数的问题-它返回的是正确的值。“问题”是不同浏览器默认呈现元素的方式。例如，如果为

#tbl

指定固定宽度，则结果是标准化的>，部分问题是所有outerWidth和offsetWidth函数都将返回的值四舍五入。按照您的建议在表上设置一个宽度可以缓解这种情况。出于好奇，非JQuery答案如何。我想你可能知道一个办法@BenM。当我们应该使用雕刻粘土的时候，这么多无知的程序员使用jQuery，比如playdoh，这太可笑了！使用本机JS，而不是像jQuery那样占用资源的库。做你的jsperf测试！啊，是的，旧的1全局1文件技术。伟大的模式，以减缓您的用户。事实上，我认为这应该是公认的答案！所有其他“blablausejquery”答案都没有以任何方式解决这个问题。好像jQuery会返回另一个宽度——当然，它不会。

function calc()
{
    var the_width = $('#tbl tr:eq(0) td:eq(0)').outerWidth();
    $('#c1offWidth').html(the_width);   
}

$(function() {  
    $('button').click(function() {  
        var the_width = $('#tbl tr:eq(0) td:eq(0)').outerWidth();
        $('#c1offWidth').html(the_width);  
    });
});