爲什麼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

回答