Question

我想我会问这个问题只是为了看看有没有人知道为什么会这样 - 尽管我很确定这是Chrome的错误。

我使用的Chrome版本是：版本30.0.1599.69 m（本文发布时的最新版本）

这是一个小提琴演示：

HTML

<table id="myTable">
<tbody>
    <tr>
        <td id="testWidth">
            This should have some width
        </td>
    </tr>
</tbody>
</table>

CSS

#myTable {
  background-color:#4679bd
}
#testWidth {
 padding: 0;
 width: 0;
}

的Javascript

var width = document.getElementById('testWidth').offsetWidth;
document.getElementById('width').innerHTML = width + 'px';

该页面将显示一个包含一些文字的蓝色框。这个蓝色的盒子显然有一些宽度 - 因为它占用空间。但CSS指定宽度为0，实际上应该只是一个建议，而表格单元格实际上会从一个推动它的孩子那里得到它的宽度。

不知何故，javascript表示table-cell的offsetWidth为0。

所有其他浏览器都会将此表格单元格的实际偏移宽度设置为某个非零值。包括您是否在Chrome v29或更低版本上进行测试。

只有Chrome v30似乎有这个问题。

任何人都知道这里发生了什么？或者我应该坐在那里等待Chrome开发人员修复错误？

当我不应该依赖于它时，也许我依赖于offsetWidth？

这似乎明显违反了W3C规范 - 也许我错了？

此外 - 似乎Chrome根本没有包装文本 - 但是所有其他浏览器都会包装文本，因为我在CSS中指定了宽度为0，它应该尽可能地减小宽度。

请注意 - 如果更改#testWidth单元格的宽度，偏移量将改为具有该宽度 - 即你可以说10px而不是0，输出将是10.所以offsetWidth只是采取任何我放入CSS的宽度，这是错误的......对吧？

Answer 1

您可以通过从css中删除width: 0;来防止此错误，也可以将其更改为最大宽度或最小宽度。

Answer 2

您正在CSS中设置该ID的宽度。删除CSS中的width: 0;。

你的CSS应该是这样的，你的问题就会消失。

#myTable {
  background-color:#4679bd
}
#testWidth {
  padding: 0;
}