3

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

IE

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

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

我已经从我的工作中删除了不必要的边距，但我仍然想知道为什么当 FF 和 IE 这样做时 Chrome 没有折叠垂直边距。

有什么想法吗？

4

2 回答 2

0

MatTheCat 说得好。

会不会是因为你的身高是100%，火狐把包含的Div的高度作为高度。Chrome 似乎将 p 标签上的边距底部包含在包含 Div 的高度中。

如果那有意义的话...

于 2014-01-16T21:07:48.117 回答
0

它只能是一个错误。

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

如果父级具有“自动”计算高度，则最后一个流入子级的下边距和其父级的下边距

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

如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为'auto'。

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

最奇怪的是，计算出的高度确实是auto，但 Chrome 似乎并没有做到它所暗示的。

正如亚历克斯的评论所说，您可以删除height: 100%;规则，让元素考虑其默认高度。auto那是。

于 2014-01-16T21:00:15.077 回答