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

Question

这个问题关系到这两个:
1.CSS -应用填充与滚动框,底部填充不起作用
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-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/

Answer 2

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

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

FF将填充框的边缘作为外边缘,这似乎与填充框的定义一致:

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

既然如此,FF似乎更接近CSS规范措辞的精神,而Chrome似乎决定剪辑到内容框的边缘,这是填充框的内边缘.

引用规范:

__PRE__

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

我认为存在一些模糊性,导致两种解释.我怀疑那些倾向于纯数学和几何学的读者可能会认为它是单向的,具有法律背景的读者可能会争论另一种观点.

在我看来,盒子模型的描述措辞是这样的,思想的进展是从内部内容区域到外边缘区域.在这种情况下,我认为"环绕"这个词意味着包围该区域的外缘.因此,我认为FF可能更正确,但Chrome的其他开发人员则不这么认为.