跨浏览器问题：最小高度和折叠边距

Question

正如你在这个简单的例子中看到的：

<div id="minheight">
    <p id="margin">Paragraph with a margin</p>
</div>
<div id="sibling">Sibling div</div>

#minheight {
    min-height: 100px;
    background: red;
}
#sibling {
    background: blue;
}

http://jsfiddle.net/peterbriers/B43th

Chrome (35) 和 Firefox (29) 之间的区别在于它如何处理具有大于子 margin 的 min-height 的块上的折叠边距。

我试图完全理解规范：http://www.w3.org/TR/CSS2/box.html#collapsing-margins，但我仍然不确定哪个浏览器能正确处理这个问题。我会说 Chrome 是错误的，但 Safari (7) 也采用 Chrome 的方式。

哪个浏览器是正确的，我如何为不正确的浏览器提交错误？ 顺便说一句：我不是通过添加新的块格式化上下文（添加溢出属性）来要求任何修复......

Answer 1

好的，所以这似乎是一个非常特殊的案例。

如果您将 min-height 更改为 height，Chrome 中的间隙就会消失。不仅 Safari 的行为与 Chrome 相同，IE 也是如此。 Firefox 的行为是独一无二的，当您对 CSS 进行调整时，它的行为不会改变。这应该令人惊讶，因为您不会期望 min-height 和 height 在您的给定场景中表现出任何不同。

然而，该规范对min-height with respect to margin collapsing 有一些有趣的说法：

以下算法描述了这两个属性如何影响“高度”属性的使用值：

[...]

这些步骤不会影响上述属性的实际计算值。除了"Collapsing margins" (8.3.1).中的“min-height”或“max-height”规则特别要求外，更改使用的“height”对边距折叠没有影响

因为您没有为具有min-height 的同一元素上的height 属性指定固定值，所以height 的计算值 仍然是默认的auto，即使虽然使用的价值被限制为min-height。

因此，第 8.3.1 节中的以下文本适用，并且块框与其子框之间的边距应该折叠，而与 min-height 无关：

两个边距相邻当且仅当：

• 两者都属于垂直相邻的盒子边缘，即形成以下对之一：

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

请注意，它继续列出一些边距可能会或可能不会崩溃的场景：

注意以上规则暗示：

• ...
• 如果盒子没有底部，则“height”为“auto”且“min-height”为零的流入块框的下边距与其最后一个流入块级子元素的底部边距一起折叠padding 并且没有底部边框，并且孩子的底部边距不会与具有间隙的顶部边距折叠。

...但它没有说明当块框具有 height: auto 和 非零 min-height 时会发生什么。

基于此，可以安全地假设规范应该像我正在做的那样解释。因此，看起来 Firefox 的行为并不完全正确，并且所有其他浏览器都在严格遵守规范，尽管人们可能对 height 和 min-height 的行为有什么期望。

您可以为 Firefox here 提交错误，尽管开发人员似乎已经提交了 made themselves aware of this issue。