在Firefox和IE中，对于没有内容的溢出元素，会忽略填充底部

Question

这个问题与这两个问题有关：
1.css-对滚动框应用填充，底部填充没有'；t工作
2.底部填充不适用于非chrome浏览器中的溢出元素

但我找不到为什么会发生这种情况，也就是说，为什么在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;
}

我并不是真的在寻找解决方案，而是想了解什么是正确的实现（以及哪些浏览器弄错了：-）。

编辑2013年12月18日

根据Marc Audet的回答，我深入研究了规格并制作了一个新的测试用例
http://jsfiddle.net/rwgZu/79/

这里很明显，所有浏览器都在同一点剪辑溢出的框，这就是填充边缘"，这确实符合规范：

每当发生溢出时，"overflow"属性指定是否将框剪裁到其填充边缘

尽管如此，在Chrome中，内盒后面还有一个额外的填充物。

有趣的是，在内框中添加溢出的内容会在所有浏览器上产生统一的结果：
http://jsfiddle.net/uPY8j/1/

我在规格中找不到这类条件的规则，所以我暂时不提这个问题。

Answer 1

我在这里也有同样的问题，我使用的不是：last childdiv（如果最后一个孩子被隐藏了怎么办？）和margin bottom技巧（不太好，滚动条不会到达底部），而是：

#container {
  padding: 20px;
  padding-bottom: 0;
  overflow: auto;
}
#container:after {
  content: "";
  height: 20px;
  display: block;
}

因此，插入一个伪元素将确保我的额外空间，这样我就可以用它来模拟我的填充底部值。你觉得怎么样？

JSFIDDLE在这里：http://jsfiddle.net/z72sn0p2/2/

Answer 2

根据W3规范，溢出的内容将被剪切到填充框的边缘：

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

FF将填充框的边缘作为外边缘，这似乎符合填充框的定义：

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

在这种情况下，FF似乎更接近CSS规范措辞的精神，而Chrome似乎已经决定剪辑到内容框的边缘，即填充框的内边缘。

引用规范：

填充边缘围绕着长方体填充。

这是否意味着边越靠近内容框，边越靠近边框？

我认为存在一些歧义，导致了两种解释。我怀疑倾向于纯数学和几何的读者可能会有一种看法，而读者有法律背景的人可能会提出另一种观点。

在我看来，盒子模型的描述是这样的，即思想的发展是从内部内容区域向外部边缘区域。在这种情况下，我认为"环绕"一词的意思是包围该地区的外缘。因此，我认为FF可能更正确，但Chrome的其他开发人员却不以为然。