7

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

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

我的印象是这是计算元素宽度的最佳方法，包括填充和边框。

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

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

jsbin 更新了

4

4 回答 4

4

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

于 2013-02-20T22:19:03.093 回答
4

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

ps：不能发表评论...

于 2013-08-01T09:27:01.133 回答
3

offsetWidth是不可靠的跨浏览器。我会建议使用 jQueryouterWidth()代替。

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

见演示。

于 2013-02-20T22:16:22.913 回答
0

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

于 2013-02-20T22:18:37.940 回答