javascript – 跨浏览器offsetWidth

我在使用不同浏览器的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上运行它时,Cell 1的偏移宽度返回的值是72.当我在firefox和IE9-10上运行它时,返回的值是77.

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

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

编辑
因为每个人都在推荐outerWidth,所以我也为它做了一个jsbin.不同浏览器的结果仍然不同. Chrome返回36; IE9-10和Firefox返回39.

jsbin updated

解决方法

由于您使用jQuery标记了帖子,我认为jQuery解决方案是可以接受的. outerWidth()有什么问题？

例如：

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);  
    });
});

请参阅jsFiddle demo.

原文地址：https://www.jb51.cc/js/157842.html