我在使用不同浏览器的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
当我在chrome,safari和opera上运行它时,Cell 1的偏移宽度返回的值是72.当我在firefox和IE9-10上运行它时,返回的值是77.
是否存在始终返回相同结果的跨浏览器解决方案？我尝试使用jQuery,但结果更令人困惑.
编辑
因为每个人都在推荐outerWidth,所以我也为它做了一个jsbin.不同浏览器的结果仍然不同. Chrome返回36; IE9-10和Firefox返回39.
解决方法
由于您使用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.
