跨浏览器问题：最小高度和折叠边距 [英] Cross-browser Issue: Min-height and collapsing margins

问题描述

您可以在这个简单的例子中看到：

 < div id =minheight> 
< p id =margin>具有保证金的段落< / p> 
< / div> 
< div id =sibling>同胞div< / div> 
  

  #minheight {
 min-height：100px; 
 background：red; 
} 
 #sibling {
背景：蓝色; 
} 
  

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的方式。

哪个浏览器是正确的，我如何提出一个错误的一个不是正确的方式吗？
BTW：我不是通过添加新的块格式化上下文（添加overflow属性）要求任何修复...

解决方案

p> OK，所以这似乎是一个非常特殊的情况。

如果将 min-height 更改为 height ，Chrome中的空白消失。 Safari的行为不仅与Chrome相同，而且IE也是如此。 Firefox的行为本身是独一无二的，并且当您对CSS进行调整时，其行为不会改变。这应该是一个惊喜，因为你不会期望 min-height 和 height

/CSS21/visudet.html#min-max-heightsrel =nofollow> min-height 相对于边缘崩溃：

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

[...]

这些步骤不会影响上述属性的实际计算值。除非在折叠边距（8.3.1）

因为您没有为具有 min-height 的相同元素的 height 属性指定固定值， ， height 的计算值仍为默认值 auto ，即使

因此，第8.3.1节中的以下文本可以使用 min-height 不管 min-height ：

$ b是否适用，并且块框与其子之间的边界应该
$ b

当且仅当：

$ b $ 两个边距 b

• 都属于垂直相邻的框边，即形成以下对之一：

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

请注意，它列出了一些方案，其中边距可能会或可能不会折叠：

请注意以上规则意味着：

• ...


• 高度为自动，最小高度为零的流入块框的下边距将折叠，如果框没有底部填充且没有底部边框，并且儿童的底部边距没有折叠，并且顶部边距具有间隙，则 - 流式块级子级的底部边距。

...但它没有说明当块框有 height：auto em>非零 min-height 。

假设规范应该解释为我在做。因此，看起来Firefox的行为不正确，并且所有其他浏览器都遵循字母的规范，尽管人们可能期望从 height 和 min-height 。

您可以为Firefox 此处，但看起来开发者已经让他们意识到这个问题。

As you can see in this simple example:

<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

There is a difference between Chrome (35) and Firefox (29) in how it handles the collapsing margins on a block with a min-height that is larger than the child's margin.

I tried to fully understand the specifications: http://www.w3.org/TR/CSS2/box.html#collapsing-margins , but I'm still unsure which browser handles this correctly. I would say Chrome is in the wrong, but Safari (7) does it the Chrome way too.

Which browser is correct, and how can I file a bug for the one that isn't doing it the right way? BTW: I'm not asking any fix by adding new block formatting context (adding overflow property)...

解决方案

OK, so this seems to be a very peculiar case.

If you change min-height to height, the gap disappears in Chrome. Not only does Safari behave the same as Chrome, but so does IE. Firefox's behavior is unique to itself, and its behavior does not change when you make that adjustment to your CSS. This should come as a surprise, as you would not expect min-height and height to behave any differently in your given scenario.

However, the spec has something interesting to say about min-height with respect to margin collapsing:

The following algorithm describes how the two properties influence the used value of the 'height' property:

[...]

These steps do not affect the real computed values of the above properties. The change of used 'height' has no effect on margin collapsing except as specifically required by rules for 'min-height' or 'max-height' in "Collapsing margins" (8.3.1).

Because you have not specified a fixed value for the height property on the same element that has a min-height, the computed value for height remains the default auto, even though the used value is floored to min-height.

Therefore the following text from section 8.3.1 applies, and the margins between the block box and its child should collapse as a result, irrespective of min-height:

Two margins are adjoining if and only if:

• both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

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

Note that it goes on to list some scenarios in which margins may or may not collapse:

Note the above rules imply that:

• ...
• The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.

... but it does not state what happens when the block box has height: auto and a non-zero min-height.

Based on this, it would be safe to assume that the spec should be interpreted as I am doing. Therefore it looks like Firefox is not behaving quite correctly, and all other browsers are following the spec to the letter, despite what one might expect from the behavior of height and min-height.

You can file a bug for Firefox here, although it looks like the developers have already made themselves aware of this issue.

这篇关于跨浏览器问题：最小高度和折叠边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！