padding inferiore non funziona sul elemento di overflow nei browser non-cromo

Question

Se si dà un'occhiata a questo violino in Chrome: http://jsfiddle.net/up4Fa/

Vedrete un elemento straripante che ha 20px di imbottitura al suo interno! Tutto bene e funzionante come previsto.

Tuttavia, se si esegue la stessa prova in IE9 o Firefox il testo in fondo tocca il bordo del contenitore e l'imbottitura in basso viene ignorato ...

Se faccio l'imbottitura su un div interno è sarà il problema, ma io preferisco ripararlo con un div e non riesco a capire perché ENTRAMBI firefox e IE abbiano problemi ma non Chrome?

MODIFICA: Il testo non è il motivo nel caso qualcuno se lo stesse chiedendo! Farà lo stesso con la casella rossa se rimuovo il testo.

Grazie

Answer 1

Sembra che, come si sta impostando le dimensioni del contenitore div indirettamente dal posizionamento, i browser riescono a prevedere l'altezza del div e rendere l'imbottitura in modo corretto. Un trucco rapido e sporco per risolvere questo problema è quello di rimuovere l'imbottitura fondo del contenitore:

div.container { 
    ... 
    padding: 20px 20px 0 20px; 
    ... 
} 

e aggiungere un margine inferiore al suo ultimo figlio:

div.container > *:last-child { 
    margin-bottom: 20px; 
} 

http://jsfiddle.net/xa9qF/

Answer 2

Una migliore approccio, a mio avviso, utilizza selettore

div.container:after{ 
    content:""; 
    display:block; 
    height:20px; /* Which is the padding of div.container */ 
} 

http://jsfiddle.net/up4Fa/23/