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

Posted 2023-03-05

【中文标题】在 Firefox 和 IE 中忽略没有内容的溢出元素的 padding-bottom

【英文标题】：padding-bottom is ignored in Firefox and IE on overflowing elements with no content

【发布时间】：2014-01-04 16:06:32

【问题描述】：

这个问题与这两个有关： 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/

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

【问题讨论】：

我在上游向 CSS 工作组报告了这种不兼容问题：github.com/w3c/csswg-drafts/issues/129#issue-156060453

@BenCreasy 好东西，很高兴它终于为有用的东西做出了贡献

【参考方案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 的其他开发人员不这么认为。

【讨论】：

感谢您的回答，绝对给了我一个更好的研究方向。尽管我认为规范对“填充边缘”的含义非常清楚。无论如何，我用新的测试用例编辑了我的问题并重命名了标题。

对新发现有什么想法吗？

今天没有想法，忙着和圣诞老人​​在 Skype 上聊天！

我更关心“什么是有意义的”或“什么是有用的”的角度。 Chrome 的实现对开发人员很有用，因为您可以选择在溢出的 div 的底部添加额外空间或通过控制填充将其删除。否则，padding-bottom 在这种情况下是没有用的。

【参考方案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/

【讨论】：

我不记得当时我做了什么来克服它，但是使用伪元素感觉有点 hacky，不过，我想这还不错。我没有使用:last-child，不确定它是如何相关的。无论如何，如果您在解决方案中添加一个 Fiddle 叉子会很好。虽然它仍然没有回答为什么 Chrome 和 Firefox 之间的差异，即使在今天。

这是一个非常有帮助的答案——在 FF、IE、Chrome 中对我有用……但在 Edge 中没有。仍在尝试为 Edge 找出解决方案。

超级有帮助，确认在 FF、IE、Chrome 和 Edge 中工作

不错的调整！广告作品。