為什麼在 Firefox 中使用「溢出：滾動」時底部填充會消失？

在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中文網其他相關文章！