padding-bottom在Firefox和IE中在没有内容的溢出元素上被忽略 [英] padding-bottom is ignored in Firefox and IE on overflowing elements with no content

问题描述

此问题与这些问题相关：

1. css - 对带滚动的框应用填充，底部填充不起作用

2. 底部填充不适用于非Chrome浏览器中的溢出元素

但我没有发现为什么会发生，意思，为什么在Chrome（31）和Opera（18）填充出现，在Firefox（26）和IE

这是我的测试用例：

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日 / p>

根据Marc Audet的答案，我挖掘了规范并提出了一个新的测试用例。

http://jsfiddle.net/rwgZu/79/

显然，所有浏览器都会截取溢出框在同一点，这是padding-edge，这是确实按照规格：

每当发生溢出时， '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; 
} 
  

因此，插入伪元素将确保我的额外空间，用于模拟我的填充底值。
你觉得怎么样？

JSFIDDLE这里：
http://jsfiddle.net/z72sn0p2/2/

This question is related to these 2:
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

But I didn't find anywhere as to why it happens, meaning, why in Chrome(31) and Opera(18) the padding does appear, and in Firefox(26) and IE(9-10) it doesn't.

Here's my test case:
http://jsfiddle.net/eW39h/4/

A simpler example from the related question #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;
}

I'm not really looking for a fix, but to understand what exactly is the correct implementation (and which browsers got it wrong :-)).

EDIT Dec 18th, 2013

Based on the answer by Marc Audet, I dug into the specs and made a new test case.
http://jsfiddle.net/rwgZu/79/

Here it's evident that all browsers clip the overflowing box at the same point, which is the padding-edge", which is indeed in accordance to the spec:

Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge

And still, in Chrome there's an extra padding after the inner box.

Interesting though, that adding overflowing content inside the inner box leads to unified results on all browsers:
http://jsfiddle.net/uPY8j/1/

I could not find in the specs the rules for this type of conditions, so I'm leaving the question still open for now.

解决方案

I have the same issue here and instead of using :last-child div (what if last child is hidden?) and margin-bottom trick (not so nice, the scroll bar will not reach the bottom) I use this:

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

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

So inserting a pseudo element will ensure my extra space, so I can use it for simulating my padding bottom value. What do you think?

JSFIDDLE HERE: http://jsfiddle.net/z72sn0p2/2/

这篇关于padding-bottom在Firefox和IE中在没有内容的溢出元素上被忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！