为什么Chrome开发工具中的元素大小工具提示和计算样式大小不同？

Question

当我在我的GWT项目中调试一个问题时，我注意到当我在一个元素上移动时，我在工具提示和阴影区域看到它的大小，表明它在屏幕上的大小和位置。但是，在选择该元素并查看其“计算样式”属性时，我注意到宽度相同，但高度与工具提示不同（为零）。

这让我想知道：Chrome在工具提示中显示的尺寸是多少？当计算的样式为零时，为什么它不为零？

此外，显示元素框模型的“metrics”区域显示高度为零的大小。

以下是关于我所说的内容的图片： http://img845.imageshack.us/img845/1766/96984162.png

Answer 1

您的doctype可能有错误 - 这可能导致元素使用异常的盒子模型呈现。尝试通过W3C验证运行您的标记？是否有任何代码出现在您的doctype之前？

当我意外地在代码的开头留下了print_r（）时，我偶然发现了这个问题。

Answer 2

工具提示显示被检查元素的有效offsetWidth / offsetHeight，而Computed Style显示... well，元素的计算样式值。 WebKit错误地为“display：inline”元素返回“0px”而不是“auto”。我想它仍适用于你的“display：table-cell”元素。