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

Question

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

的Chrome版本，我使用的是：版本30.0.1599.69米

这里（在这篇文章时的最新版本），演示了一个小提琴：

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中的宽度是多少，这是错误的......对吗？

Answer 1

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

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

Answer 2

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

你的CSS应该是这样的，你的问题就会迎刃而解。

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