Perché Firefox si comporta diversamente sui margini di compressione?

Firefox visualizza un margine di 100 pixel nella parte superiore di div.p. Sembra essere un crollo dei margini. Ma l'altezza calcolata di div.p è 100 px. Secondo lo spec non dovrebbe fare collasso dei margini. È un bug, o sbaglio qui? Chrome esegue il rendering come previsto.
codepen Perché Firefox si comporta diversamente sui margini di compressione?

.s { 
 
    height: 100px; 
 
    width: 200px; 
 
    background: yellow; 
 
    float: left; 
 
} 
 
.p { 
 
    margin-top: 20px; 
 
    margin-bottom: 100px; 
 
    zoom: 1; 
 
} 
 
.p:after { 
 
    content: ' '; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
}

<div class="p"> 
 
    <div class="s"></div> 
 
</div>

fonte

2015-07-06 szmtcjm

Non sono sicuro di cosa sia, ma non succede se si rimuove il 'float: left', quindi non penso che sia un margine di compressione. –

Sembra che ci sia un problema con il margin-bottom che crea un overflow, se aggiungiamo '* {overflow: auto}', il problema non si verifica più: http://codepen.io/anon/pen/ZGxWVB – Kaiido

Posso capire perché se usiamo '* {overflow: auto}', il problema non si verifica più perché crea un BFC. – szmtcjm

io non sono sicuro perché il clearfix tradizionale non funziona, ma qui ci sono tre modi che:

Come Kaiido detto un *{overflow:auto;} funziona bene per correggi il problema Funziona anche come *{overflow:hidden;}.

Se non si desidera un overflow di una coperta, è possibile essere più precisi inserendo overflow:hidden o overflow:auto a solo .p. Questo risolve anche il problema.

Infine, se si modifica display: block in display: table nella correzione (.p:after), il problema scompare anche.

Non sono davvero sicuro del motivo per cui il tradizionale clearfix non funziona, ma non è troppo difficile da aggirare.

fonte

2015-07-06 03:46:12

Perché Firefox si comporta diversamente sui margini di compressione?

risposta

Problemi correlati