跨浏览器偏移宽度

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

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

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

见DEMO。

Answer 2

如果您需要跨浏览器计算宽度，包括边框和边距，您可以使用 jQuery 的 .outerWidth()。

Answer 3

由于您使用 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。

Answer 4

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

ps：无法发布 cmets...