在 Firefox 和 IE 中忽略没有内容的溢出元素的 padding-bottom

Question

这个问题与这两个有关：
1.css - applying padding to box with scroll, bottom-padding doesn't work
2.Bottom padding not working on overflow element in non-chrome browsers

但我没有找到任何关于它发生的原因，这意味着为什么在 Chrome(31) 和 Opera(18) 中会出现填充，而在 Firefox(26) 和 IE(9-10) 中却没有t.

这是我的测试用例：
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/

这里很明显所有浏览器都在同一点剪辑溢出框，也就是padding-edge”，这确实符合规范：

当溢出发生时，'overflow' 属性指定一个盒子是否被裁剪到它的填充边缘

而且，在 Chrome 中，在内框之后还有一个额外的填充。

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

我在规范中找不到此类条件的规则，所以我暂时将问题留待解决。

Answer 1

根据W3规范，溢出的内容会被裁剪到padding box的边缘：

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

FF取padding box的边缘为外边缘，好像是按照padding box的定义：

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

既然如此，FF 似乎更接近 CSS 规范措辞的精神，而 Chrome 似乎决定裁剪到内容框的边缘，也就是填充框的内边缘。

引用规范：

内边距边缘围绕盒子内边距。

这是否意味着更接近内容框的边缘更接近边界？

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

在我看来，盒子模型的描述是这样的，思想的进展是从内部内容区域到外部边缘区域。既然如此，我认为“环绕”这个词意味着包围该区域的外边缘。因此，我认为 FF 可能更正确，但 Chrome 的其他开发人员不这么认为。

Answer 2

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

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

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

所以插入一个伪元素将确保我的额外空间，所以我可以用它来模拟我的填充底部值。 你怎么看？

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