Question

我在使用不同浏览器的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>

JS

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

CSS

Erik Meyer's Reset CSS

当我在chrome，safari和opera上运行它时，Cell 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为表带来了许多优势（正如您可以通过上面所需的减少的代码量看到的那样）。您还应该考虑使用非侵入式事件处理程序。例如，从onclick中删除button属性，然后执行以下操作：

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

请参阅jsFiddle demo。

Answer 2

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

ps：无法发表评论......

Answer 3

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

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

请参阅DEMO。

Answer 4

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

跨浏览器offsetWidth

4 个答案: