javascript - 跨浏览器 offsetWidth

Question

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

jsbin

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>

js

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

CSS

Erik Meyer's Reset CSS

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

我的印象是这是计算元素宽度(包括内边距和边框)的最佳方式。

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

编辑因为每个人都推荐 outerWidth 我也为此制作了一个 jsbin。结果仍然因浏览器而异。 Chrome 返回 36； IE9-10 和 Firefox 返回 39。

jsbin updated

Answer 1

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

例如:

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

使用 jQuery 为表格带来了许多优势(正如您可以从上面所需的代码量减少中看到的那样)。您还应该考虑使用非侵入式事件处理程序。例如，从您的 button 中删除 onclick 属性，然后执行以下操作:

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

请参阅jsFiddle demo .