css - 垂直边距不会在 Chrome 中折叠

Question

在这个 fiddle 中，http://jsfiddle.net/munkii/tpQQN/我通过 intro 类在段落元素上有一些边距底部，通过 what-is 类在列表项上有一些边距底部。

即

article.about .what-is {
    height: 100%;
    margin-bottom: 34px;
    padding-right: 34px;
    width: 600px;
}

article.about p.intro {
    font-weight: bold;
    margin-bottom: 43px;
}

我已经从我的工作中删除了不必要的边距，但仍然有兴趣知道为什么 Chrome 不会像 FF 和 IE 那样折叠垂直边距。

有什么想法吗？

Answer 1

只能是bug。

根据 http://www.w3.org/TR/CSS2/box.html#collapsing-margins这些边距应该像我们在这种情况下一样折叠:

bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height

.what-is' 的高度应该计算为 auto 因为

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

( http://www.w3.org/TR/CSS2/visudet.html#the-height-property )

最奇怪的是计算出的高度确实是 auto，但 Chrome 似乎并没有按照它的意思去做。

正如 Alex 的评论所述，您可以删除 height: 100%; 规则，该规则允许元素考虑其默认高度。 auto 即。