acolchado inferior no está trabajando en elemento de desbordamiento en los navegadores sin cromo

Question

Si se echa un vistazo en este violín en Chrome: http://jsfiddle.net/up4Fa/

Usted verá un elemento desbordante que tiene 20 píxeles de acolchado en su interior! Todo bien y trabajando como se esperaba.

Sin embargo, si se ejecuta la misma prueba en IE9 o Firefox el texto en la parte inferior toca el borde del recipiente y el relleno inferior está siendo ignorado ...

Si hago el relleno en una div interior se ¿Será el problema, PERO prefiero solucionarlo con un div y no puedo entender por qué tanto Firefox como IE tienen problemas pero no Chrome?

EDITAR: ¡El texto no es la razón por la que alguien se estaba preguntando! Hará lo mismo con el cuadro rojo si elimino el texto.

Gracias

Answer 1

Parece que a medida que se está configurando las dimensiones del contenedor div indirectamente por el posicionamiento, los navegadores no pueden predecir la altura del div y hacer el relleno correctamente. Un truco rápido y sucio de solucionar este problema es quitar el relleno de fondo del recipiente:

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

y añadir un margen inferior a su último hijo:

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

http://jsfiddle.net/xa9qF/

Answer 2

Una mejor enfoque, en mi opinión, está utilizando :after selector

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

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