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

在我调试GWT项目中的一个问题时，我注意到当我对一个元素进行挖掘时，我在工具提示中看到了它的大小，并在屏幕上显示了它的大小和位置。但是，选择该元素并查看其“计算样式”属性时，我注意到宽度相同，但高度与工具提示不同（它为零）。为什么Chrome开发工具中元素大小工具提示和计算样式大小有所不同？

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

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

2011-04-23 mikebutler

哇，好问题。我担心这看起来像开发工具中的bug或陷阱。它只是在截图中的静态HTML，或者可能一些JavaScript导致这种影响？（即在服务器上渲染后，高度是否改变了客户端或者没有改变？） – Jeroen 2011-04-30 09:44:43

通过JavaScript，高度肯定会改变客户端。 JavaScript通过GWT编译成魔术。也许我会尝试提交针对Chrome的错误并查看他们的说法。 – mikebutler 2011-05-01 06:39:57

这有可能是你有一个错误你的文档类型 - 这可能会导致元素与异常盒模型渲染。试图通过W3C验证运行你的标记？是否有任何代码出现在您的文档类型之前？

我偶然在我的代码开头留下一个print_r（）的时候碰到过这个问题。

2011-05-24 06:39:47

我试着改变文档类型，但是我试过的所有文档类型都是4.01以外的过渡版本，似乎只是完全打破了布局。伤心。 – mikebutler 2011-06-01 00:56:33

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

2011-11-22 09:45:32

Webkit错误已得到修复，现在计算出的宽度/高度值应该是“auto”。 – 2012-01-27 12:04:39

回答