html - inspeccionar - margin-bottom

padding-bottom es ignorado en Firefox e IE en elementos desbordados sin contenido

Question

Esta pregunta está relacionada con estos 2:
1. CSS: aplicar el relleno a la caja con desplazamiento, el relleno inferior no funciona
2. El relleno inferior no funciona en el elemento de desbordamiento en navegadores que no son de Chrome.

Pero no encontré en ninguna parte el por qué sucede, es decir, por qué en Chrome (31) y Opera (18) aparece el relleno, y en Firefox (26) y IE (9-10) no.

Aquí está mi caso de prueba:
http://jsfiddle.net/eW39h/4/

Un ejemplo más simple de la pregunta relacionada n. ° 1:
http://jsfiddle.net/rwgZu/

<div id="container">
    <div id="innerBox"></div>
</div>

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#innerBox{
    height: 400px;
    background: #000;
}

Realmente no estoy buscando una solución, pero para entender cuál es exactamente la implementación correcta (y qué navegadores lo entendieron mal :-)).

EDITAR 18 de diciembre de 2013

Basado en la respuesta de Marc Audet, profundicé en las especificaciones e hice un nuevo caso de prueba.
http://jsfiddle.net/rwgZu/79/

Aquí es evidente que todos los navegadores recortan la caja desbordante en el mismo punto, que es el borde de relleno ", que de hecho está de acuerdo con la especificación:

Siempre que se produce un desbordamiento, la propiedad ''desbordamiento'' especifica si un recuadro está recortado en su margen de relleno

Y aún así, en Chrome hay un relleno extra después de la caja interna.

Sin embargo, es interesante que agregar contenido desbordante dentro del cuadro interno conduzca a resultados unificados en todos los navegadores:
http://jsfiddle.net/uPY8j/1/

No pude encontrar en las especificaciones las reglas para este tipo de condiciones, así que dejo la pregunta abierta por el momento.

Answer 1

De acuerdo con la especificación W3, el contenido desbordado se recortará en el borde de la caja de relleno:

http://www.w3.org/TR/CSS21/visufx.html

FF toma el borde de la caja de relleno para que sea el borde exterior, lo que parece estar de acuerdo con la definición de la caja de relleno:

http://www.w3.org/TR/CSS21/box.html

Siendo ese el caso, FF parece estar más cerca del espíritu de la redacción de la especificación CSS, mientras que Chrome parece haber decidido acoplarse al borde del cuadro de contenido, que es el borde interno del cuadro de relleno.

Para citar la especificación:

The padding edge surrounds the box padding. 

¿Significa esto el borde más cercano al cuadro de contenido para el borde más cercano al borde?

Creo que hay cierta ambigüedad, lo que lleva a dos interpretaciones. Sospecho que los lectores con una inclinación hacia las matemáticas y la geometría puras pueden verlo de una manera, y los lectores con una base legal pueden argumentar un punto de vista alternativo.

En mi opinión, la descripción del modelo de caja está redactada de modo que la progresión del pensamiento va desde el área de contenido interno hacia el área de margen exterior. Siendo ese el caso, creo que la palabra "rodea" significaría encerrar el borde exterior del área. Por lo tanto, creo que FF es quizás más correcto, pero otros desarrolladores de Chrome piensan lo contrario.

Answer 2

Tengo el mismo problema aquí y en lugar de usar: div último-niño (¿y si el último hijo está escondido?) Y truco de margen-abajo (no tan bueno, la barra de desplazamiento no llegará al final) Yo uso esto:

#container {
  padding: 20px;
  padding-bottom: 0;
  overflow: auto;
}

#container:after {
  content: "";
  height: 20px;
  display: block;
}

Así que insertar un pseudo elemento asegurará mi espacio extra, así que puedo usarlo para simular el valor de mi fondo de relleno. ¿Qué piensas?

JSFIDDLE AQUÍ: http://jsfiddle.net/z72sn0p2/2/