Padding-bottom игнорируется в Firefox и IE при переполнении элементов без содержимого

Этот вопрос относится к этим 2:
1. css - применение отступа к блоку с прокруткой, нижнее заполнение не работает
2. Заполнение дна не работает для элемента переполнения в нехромных браузерах

Но я нигде не нашел, почему это происходит, то есть почему в Chrome (31) и Opera (18) отступы появляются, а в Firefox (26) и IE (9-10) - нет.

Вот мой тестовый пример:
http://jsfiddle.net/eW39h/4/

Более простой пример из соответствующего вопроса № 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;
}

Я на самом деле не ищу исправления, но понимаю, что именно является правильной реализацией (и какие браузеры ошиблись :-)).

РЕДАКТИРОВАТЬ 18 декабря 2013 г.

Основываясь на ответе Марка Одета, я углубился в спецификации и сделал новый тестовый пример.
http://jsfiddle.net/rwgZu/79/

Здесь очевидно, что все браузеры обрезают переполненный блок в одной и той же точке, которая является отступом ", что действительно соответствует спецификации:

Всякий раз, когда происходит переполнение, свойство 'overflow' указывает, будет ли блок обрезан по его краю заполнения

И все же в Chrome есть дополнительная обивка после внутренней коробки.

Интересно, что добавление переполненного содержимого во внутреннее поле приводит к унифицированным результатам во всех браузерах:
http://jsfiddle.net/uPY8j/1/

Я не смог найти в спецификации правила для этого типа условий, поэтому я оставляю вопрос пока открытым.

Ответ 1

У меня такая же проблема, и вместо использования: div-last-child (что, если последний ребенок скрыт?) и трюк "margin-bottom" (не так приятно, полоса прокрутки не доходит до нижней). Я использую это:

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

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

Таким образом, вставка псевдоэлемента обеспечит мое дополнительное пространство, поэтому я могу использовать его для моделирования моего нижнего значения padding. Как вы думаете?

JSFIDDLE ЗДЕСЬ: http://jsfiddle.net/z72sn0p2/2/

Ответ 2

В соответствии со спецификацией W3 переполненный контент будет обрезан по краю поля заполнения:

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

FF принимает край поля заполнения как внешний край, который, кажется, соответствует определению поля заполнения:

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

В этом случае FF, похоже, ближе к духу формулировки спецификации CSS, тогда как Chrome, похоже, решил обрезать край окна содержимого, которое является внутренним краем поля заполнения.

Цитировать спецификацию:

Край отступа окружает отступ поля.

Означает ли это, что край ближе к окну контента, а край ближе к границе?

Я думаю, что есть некоторая двусмысленность, приводящая к двум интерпретациям. Я подозреваю, что читатели со склонностью к чистой математике и геометрии могут увидеть это с одной стороны, и читатели с юридическим прошлым может привести альтернативную точку зрения.

На мой взгляд, описание блочной модели сформулировано так, что развитие мышления происходит от внутренней области содержимого к области внешней границы. В таком случае я бы подумал, что слово "окружает" будет означать окружение внешнего края области. Таким образом, я думаю, что FF, возможно, более прав, но другие разработчики в Chrome думают иначе.