為什麼 Firefox 在溢出時省略元素底部的填充：滾動？

排查Firefox 因溢出而導致的Padding 遺漏問題

同時實現溢出：滾動和padding CSS 屬性時，用戶可能會遇到Firefox 抑制填滿的問題元素底部的內邊距，與Chrome 和Safari 等瀏覽器不同。

問題場景：

`

< ;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>no padding after last line in Firefox</li>

`

在此程式碼段中，元素的高度為100px，內邊距為50px，紅色邊框，垂直捲動溢位。然而，在 Firefox 中，容器底部的填充缺失，造成意外的外觀。

解決方法：

雖然這個問題可能看起來令人困惑，但相對來說，簡單的純CSS解決方案可以解決它：

<code class="css">.container:after {
    content: "";
    height: 50px;
    display: block;
}</code>

透過新增此CSS規則，您可以插入一個高度等於容器填滿的空元素。此元素用作佔位符，確保即使滾動溢出也能始終保持填充。

示範：

[Fiddle](https://jsfiddle.net /rdx8k4mz/) 示範解決方法。

以上是為什麼 Firefox 在溢出時省略元素底部的填充：滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！