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

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关于保证金折叠,规范有一些有趣的内容:

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

[...]

这些步骤不会影响上述属性的实际计算值.使用"高度"的更改对边距折叠没有影响,除非"折叠边距"(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提交一个bug ,虽然看起来开发人员已经让自己意识到了这个问题.