Multiple Browser Problem: Minimum Height and Collapsing Fields

Question

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 the way it handles collapsed fields on block c min-height, which is larger than the child margin.

I tried to fully understand the specifications: http://www.w3.org/TR/CSS2/box.html#collapsing-margins , but I still don't know which browser is using this correctly. I would say that Chrome is wrong, but Safari (7) also makes Chrome.

Which browser is right, and how can I find an error for someone who is not doing it right? BTW: I am not asking for any corrections by adding a new block formatting context (adding an overflow property) ...

Answer 1

, .

min-height height, Chrome. Safari , Chrome, IE. Firefox , CSS. , , min-height height - .

- , min-height :

, height:

[...]

. "" , , "min-height" "max-height" " " (8.3.1).

height , min-height, height auto, min-height.

, 8.3.1, , min-height:

, :

• , .. :

  • ...
  • , ""

, , :

, :

• ...
• "" "" " " , , .

... , , - height: auto min-height.

, , , . , Firefox , , , height min-height.

Firefox , , .