为什么 Chrome 开发工具中的元素大小工具提示和计算的样式大小不同？
当我在 GWT 项目中调试问题时，我注意到当我将鼠标悬停在某个元素上时，我会在工具提示中看到它的大小，以及指示其在屏幕中的大小和位置的阴影区域。但是，当选择该元素并查看其“计算样式”属性时，我注意到宽度相同，但高度与工具提示不同（它为零）。
这让我想知道：Chrome 在工具提示中显示的大小是多少？为什么当计算的样式为零时它不为零？
此外，显示元素的盒模型的“度量”区域显示高度为零的尺寸。
这是一张关于我正在谈论的内容的图片： http://img845.imageshack.us/img845/1766/96984162.png
While I was debugging an issue in my GWT project, I noticed that when I moused over an element, I saw its size in a tooltip and a shaded region indicating its size and position in the screen. However, when selecting that element and viewing its "computed style" attributes, I notice that the width is the same, but the height differs from the tooltip (it is zero).
This makes me wonder: what is the size that Chrome is displaying in the tooltip? Why is it nonzero when the computed style is zero?
Also, the "metrics" region that shows the box model for the element displays a size with a height of zero.
Here is an image about what I am talking about:
http://img845.imageshack.us/img845/1766/96984162.png
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您的文档类型可能有错误——这可能会导致元素以异常的盒模型进行渲染。尝试过通过 W3C 验证运行您的标记吗？您的文档类型之前是否有任何代码出现？
不久前，当我不小心在代码开头留下了 print_r() 时，我遇到了这个问题。
It's possible that you have an error with your doctype -- this can cause elements to render with an abnormal box model. Tried running your markup through W3C validation? Is there any code that appears before your doctype?
I came across this problem a while back when I accidentally left a print_r() at the beginning of my code.
工具提示显示所检查元素的有效 offsetWidth/offsetHeight，而计算样式显示......好吧，元素的计算样式值。 WebKit 错误地为“display: inline”元素返回“0px”而不是“auto”。我想它仍然适用于您的“display：table-cell”元素。
The tooltip displays the effective offsetWidth/offsetHeight for the inspected element, while the Computed Style displays... well, computed style values for the element. WebKit erroneously returns "0px" instead of "auto" for "display: inline" elements. I guess it still holds for your "display: table-cell" element.
我遇到了同样的问题，发现我已向其中一个父组件添加了
transform:scale(0.9);样式。一旦我删除它，元素大小工具提示和盒模型中计算的样式大小就会匹配。如果您有类似的转换影响您的元素，可能值得检查。I faced the same issue and found out that I had added a
transform: scale(0.9);style to one of the parent components. Once I removed that, the element size tooltip and the computed style sizes in the box model matched up. It might be worth checking if you have a similar transformation affecting your element.