Chrome的offsetWidth与FF / IE不一致

Question

我最近接手了一个项目，导航菜单没有正确显示。我将问题缩小到chrome如何计算包含子<a>的父<p>的offsetWidth。所有其他浏览器在计算父级的offsetWidth时会考虑子项，但chrome的宽度为0.我的解决方案是将外部标记设置为display:block。

这个小提琴演示了这个问题。

http://jsfiddle.net/2ZwNM/

我想知道为什么会发生这种情况？这是因为在<p>内放置了<a>吗？

Answer 1

我认为您可以找到所有必需的信息here。

引用相关部分：

  

当内联框包含一个流内块级别框时，内嵌框（及其同一行框内的内联祖先）在块级框（以及任何连续的块级兄弟）中被打破。仅由可折叠的空白和/或流出元素分隔），将内联框分成两个框（即使任一边为空），块级框的每一边一个。中断前和中断后的行框都包含在匿名块框中，块级框成为这些匿名框的兄弟。当这样的内联框受到相对定位的影响时，任何结果转换也会影响内联框中包含的块级框。

例如，如果您在inline中添加了一些wrapper内容（例如此jsfiddle），则wrapper的宽度将为width那些内联内容。