html – Chrome的offsetWidth与FFIE不一致

概述我最近接手了一个项目导航菜单没有正确显示.我将问题缩小到chrome如何计算父< a>的offsetWidth.包含一个孩子< p>.所有其他浏览器在计算父级的offsetWidth时会考虑子项,但chrome的宽度为0.我的解决方案是将外部标记设置为display：block. 这个小提琴演示了这个问题. http://jsfiddle.net/2ZwNM/ 我想知道的是为什么会这样？这是由于放 我最近接手了一个项目导航菜单没有正确显示.我将问题缩小到Chrome如何计算父< a>的offsetWIDth.包含一个孩子< p>.所有其他浏览器在计算父级的offsetWIDth时会考虑子项,但Chrome的宽度为0.我的解决方案是将外部标记设置为display：block.

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

http://jsfiddle.net/2ZwNM/

我想知道的是为什么会这样？这是由于放置< p>的原因.在一个< a>？

解决方法 我想你可以找到所有必需的信息 here.

只是引用相关部分：

When an inline Box contains an in-flow block-level Box,the inline Box (and its inline ancestors within the same line Box) are broken around the block-level Box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements),splitting the inline Box into two Boxes (even if either sIDe is empty),one on each sIDe of the block-level Box(es). The line Boxes before the break and after the break are enclosed in anonymous block Boxes,and the block-level Box becomes a sibling of those anonymous Boxes. When such an inline Box is affected by relative positioning,any resulting translation also affects the block-level Box contained in the inline Box.

因此,例如,如果在包装器中添加一些内联内容(例如,此jsfiddle),则该包装器的宽度将是这些内联内容的宽度.

总结

以上是内存溢出为你收集整理的html – Chrome的offsetWidth与FF / IE不一致全部内容，希望文章能够帮你解决html – Chrome的offsetWidth与FF / IE不一致所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。