在Firefox 中因溢出而忽略填充：滾動
在涉及CSS 溢出：滾動屬性和填充的某些場景中，Firefox表現出一種特殊的行為，其中元素底部的填充消失。這與 Chrome 和 Safari 等瀏覽器中觀察到的預期功能形成鮮明對比。
當您將 Overflow:scroll 屬性與 padding 屬性（定義元素的垂直捲動）結合使用時，就會出現問題。元素內容與其邊框之間的間距。在 Firefox 中，元素底部的填滿消失，留下可見內容超出定義的填滿區域的邊緣。
為了說明此問題，請考慮以下CSS 程式碼：
<code class="css">.container {
height: 100px;
padding: 50px;
border: solid 1px red;
overflow-y: scroll;
}
ul,
li {
padding: 0;
margin: 0;
}</code>當將此程式碼套用到如下所示的HTML 結構時，您會注意到Firefox 中元素底部缺少填充，而它在其他瀏覽器中按預期顯示：
<code class="html"><div class="container">
<ul>
<li>padding above first line in every Browser</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>no padding after last line in Firefox</li>
</ul>
</div></code>[查看演示](演示URL)
要解決這個問題，可以採用簡單的純CSS 解決方案：
<code class="css">.container:after {
content: "";
height: 50px;
display: block;
}</code>此CSS 程式碼在容器元素後面加上一個固定高度的元素50px（相當於底部填滿）。透過插入此元素，您可以創建一個可見的空間來彌補缺少的填充，從而有效地解決問題。
需要注意的是，此解決方案雖然有效，但並不是一個理想或優雅的解決方案。然而，它提供了一種解決方法，直到有更完善的解決方案可用。
以上是為什麼在 Firefox 中使用「溢出：滾動」時底部填充會消失？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
