オーバーフロー: スクロールを使用すると、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 中国語 Web サイトの他の関連記事を参照してください。