此问题与以下两个问题有关:1.css - applying padding to box with scroll, bottom-padding doesn't work2. 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;
}
我并不是真正在寻找解决方案,而是要了解正确的实现到底是什么(以及哪些浏览器将其弄错了:-)。
EDIT 2013年12月18日
根据Marc Audet的回答,我深入研究了规格并制作了一个新的测试用例。http://jsfiddle.net/rwgZu/79/
[很明显,所有浏览器都将溢出框修剪到同一点,即填充边“,这确实符合规范:
无论何时发生溢出,'overflow'属性都会指定是否将一个框修剪到其填充边缘
而且,在Chrome浏览器中,内部框后还有一个额外的填充。
不过,有趣的是,在内部框中添加溢出的内容会导致在所有浏览器上产生统一的结果:http://jsfiddle.net/uPY8j/1/
我在规格书中找不到这类条件的规则,所以我暂时不提这个问题。
我在这里有相同的问题,而不是使用:last-child div(如果隐藏了最后一个孩子,该怎么办?)和margin-bottom技巧(不太好,滚动条将无法到达底部),我使用此方法:] >
#container {
padding: 20px;
padding-bottom: 0;
overflow: auto;
}
#container:after {
content: "";
height: 20px;
display: block;
}
根据W3规范,溢出的内容将被剪切到填充框的边缘: