填充底在Firefox和IE被忽略外溢元素沒有內容

這個問題是關係到這兩個：
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 填充底在Firefox和IE被忽略外溢元素沒有內容

但我沒有發現任何地方，爲什麼它發生了，也就是說，爲什麼在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/

這是明顯的是，所有的瀏覽器夾四溢框在同一點，這是填充邊緣」，這確實是按照該規範：

每當發生溢出，「溢出」屬性指定一個框是否被剪輯到其填充邊緣

而且是，在Chrome中有內盒後微胖。

有趣雖然，加內盒內部溢出的內容會導致統一的結果，在所有瀏覽器：
http://jsfiddle.net/uPY8j/1/

我無法在規格找到這種類型的條件規則，所以我要離開的問題仍現在開放。

來源

2013-12-17 Alex Ilyaev

我報這個不兼容上游的CSS工作組：https://github.com/w3c/csswg-drafts/issues/129#issue-156060453 –

@BenCreasy好東西，很高興它終於有助於一些有用的東西 –

按照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中的其他開發人員認爲不然。

來源

2013-12-17 03:01:22

感謝您的回答，絕對給了我一個更好的方向挖掘。雖然我認爲規範是什麼「填充邊緣」意味着很清楚。無論如何，我用新的測試用例編輯我的問題並重新命名標題。 –

關於新發現的任何想法？ –

今天沒有想法，在Skype上忙於與聖誕老人！ –

我在這裏有同樣的問題，而不是使用：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/

來源

2015-06-26 08:49:54 ans777

我不記得當時我做了什麼來克服它，但使用僞元素感覺有點哈克，但是，我猜它不是那麼糟糕。我沒有使用'：last-child'，不確定它是如何相關的。任何方式，如果你想在你的解決方案中添加小提琴叉，那就太好了。雖然它仍然沒有回答爲什麼Chrome和Firefox之間的區別，即使在今天。 –

這是一個非常有用的答案 - 在FF，IE，Chrome中爲我工作，但不在Edge中。仍在試圖找出Edge的解決方案。 – Ender2050

超級有用，證實在FF，IE瀏覽器，Chrome和邊緣工作 – DannyB

填充底在Firefox和IE被忽略外溢元素沒有內容

回答

相關問題