javascript - 为什么 Chrome 给我这个表格单元格的宽度为 0？

Question

我想我会问这个问题只是为了看看是否有人知道为什么会发生这种情况 - 尽管我相当确定这是 Chrome 的错误。

我使用的 Chrome 版本是:版本 30.0.1599.69 m(本文发布时的最新版本)

这是一个演示的 fiddle :

http://jsfiddle.net/Dz4Q5/

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 以某种方式表示表格单元格的偏移宽度为 0。

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

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

有人知道这是怎么回事吗？还是我应该坐等 Chrome 开发人员修复错误？

也许我不应该依赖 offsetWidth 而依赖它？

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

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

请注意 - 如果您更改 #testWidth 单元格的宽度，偏移量将更改为具有该宽度 - 即您可以说 10px 而不是 0，并且输出将为 10。因此 offsetWidth 只是取任何值我在 CSS 中输入的宽度是错误的...对吗？？

Answer 1

您可以通过从您的 css 中删除 width: 0; 来防止此错误，您也可以将其更改为 max- 或 min-width。

http://jsfiddle.net/Dz4Q5/4/