4

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

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

这是一个演示的小提琴：

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说表格单元格的offsetWidth为0。

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

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

有人知道这里发生了什么吗？还是我应该坐等 Chrome 开发人员修复错误？

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

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

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

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

4

2 回答 2

0

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

你的 CSS 应该看起来像这样，你的问题就会消失。

#myTable {
  background-color:#4679bd
}
#testWidth {
  padding: 0;
}
于 2013-10-09T12:05:42.907 回答
0

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

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

于 2013-10-09T02:31:55.137 回答