跨浏览器offsetWidth

Question

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

吉斯宾

<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>

js

function calc(){
  document.getElementById('c1offWidth').innerHTML =
      document.getElementById('tbl').children[0].children[0].offsetWidth;
}

CSS

Erik Meyer的重置CSS

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

我的印象是，这是计算元素宽度的最佳方法，包括填充和边框。

是否有总是返回相同结果的跨浏览器解决方案？我试过使用jQuery，但结果更令人困惑。

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

jsbin更新

Answer 1

因为您用jQuery标记了帖子，所以我假设jQuery解决方案是可以接受的。outerWidth()怎么了？

例如：

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

使用jQuery给表带来了许多好处(正如您看到的，上面所需的代码减少了)。您还应该考虑使用非侵入性事件处理程序。例如，从您的onclick中删除button属性，并执行以下操作：

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

请看jsFiddle演示。

Answer 2

您的示例中的实际问题是不同的浏览器使用不同的默认字体进行呈现。您的单元格的大小由内容定义。如果您为元素设置了一定的宽度(正如在注释中正确说明的那样)，您将得到确定的、相等的结果。

不能发表评论..。

Answer 3

offsetWidth不是可靠的跨浏览器。我建议改用jQuery的outerWidth()。

$("#your-element").outerWidth();

见演示。