Chrome的offsetWidth與FF/IE不一致

Question

我最近接手了一個項目，導航菜單顯示不正確。我將問題的範圍縮小到chrome如何計算包含子<p>的父<a>的offsetWidth。所有其他瀏覽器都會在計算父級的offsetWidth時考慮子級，但chrome會給出寬度0.我的解決方案是將外部標記設置爲display:block。

這個小提琴演示了這個問題。

http://jsfiddle.net/2ZwNM/

我想知道的是爲什麼會這樣？這是由於<p>在<a>內的事實嗎？

Answer 1

我認爲你可以找到所有需要的信息here。

只需引用相關部分：

當inline框包含一個在流塊級框，內框（在同一行內箱和它的內聯祖先）圍繞嵌段破（以及任何僅由可摺疊空白和/或流失元素連續或分隔的塊級別的兄弟姐妹），將內聯框分成兩個框（即使任何一方都是空的），每一個框塊級框（es）。休息之前和休息之後的線框包含在匿名塊框中，並且塊級框成爲這些匿名框的兄弟。當這樣的內聯框受到相對定位的影響時，任何生成的轉換也會影響內聯框中包含的塊級框。

因此，例如，如果您在添加一些inline內容您wrapper（例如本jsfiddle），那麼wrapper的寬度將這些在線內容的width。