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）之间的区别在于它如何处理块min-height大于孩子的margin的折叠边距。

我试图完全理解规范：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有一些有趣的说法：

以下算法描述了这两个属性如何影响'height'属性的使用值：

[...]

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

由于您没有为具有height的同一元素上的min-height属性指定固定值，因此height的计算值仍为默认auto，即使使用的值已归为min-height。

因此，8.3.1节中的以下文本适用，并且无论min-height如何，块框与其子之间的边距都会崩溃：

当且仅当：
时，两个边距相邻


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


...

最后一个流入子项的下边距和父项的下边距（如果父项具有'自动'计算高度

请注意，它会列出一些边距可能会或可能不会崩溃的情况：

注意以上规则意味着：


...

如果盒子没有底部，“高度”为“auto”且“min-height”为零的流入块盒的底部边缘会与其最后一个流入块级子的底部边缘折叠填充并且没有底部边框，并且孩子的下边距不会因具有间隙的上边距而崩溃。

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

基于此，可以安全地假设规范应该被解释为我正在做的事情。因此，看起来Firefox的行为并不正确，所有其他浏览器都遵循规范，尽管人们可能会对height和min-height的行为有所期待。

您可以为Firefox here提交错误，但看起来开发人员已经made themselves aware of this issue了。

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

1 个答案: