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）中它没有'吨。

这是我的测试用例：
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似乎决定剪切到内容框的边缘，这是填充框的内边缘。

引用规范：

The padding edge surrounds the box padding.

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

我认为存在一些歧义，导致两种解释。我怀疑那些倾向于纯数学和几何学的读者可能会认为它是单向的，读者也是如此具有法律背景可能会争论另一种观点。

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

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

2 个答案: