在没有内容的元素溢出的情况下,在Firefox和IE中将忽略填充底部

问题描述 投票:21回答:2

此问题与以下两个问题有关: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/

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

html css internet-explorer google-chrome firefox
2个回答
27
投票

我在这里有相同的问题,而不是使用:last-child div(如果隐藏了最后一个孩子,该怎么办?)和margin-bottom技巧(不太好,滚动条将无法到达底部),我使用此方法:] >

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

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

5
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.