Problema em vários navegadores: margens mínimas e em colapso
Como você pode ver neste exemplo simples:
<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
Há uma diferença entre o Chrome (35) e o Firefox (29) na maneira como ele lida com as margens recolhidas em um bloco com ummin-height
que é maior que o da criançamargin
.
Tentei entender completamente as especificações:http://www.w3.org/TR/CSS2/box.html#collapsing-margins , mas ainda não tenho certeza de qual navegador lida com isso corretamente. Eu diria que o Chrome está errado, mas o Safari (7) também faz o Chrome.
Qual navegador está correto e como posso registrar um bug para o que não está fazendo o caminho certo? BTW: Não estou pedindo nenhuma correção adicionando novo contexto de formatação de bloco (adicionando propriedade de estouro) ...