Firefox がオーバーフロー: スクロールで要素の下部のパディングを省略するのはなぜですか?

オーバーフローによる Firefox のパディング省略のトラブルシューティング

オーバーフロー: スクロールとパディング 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>

`

このスニペットでは、要素の高さは 100 ピクセル、パディングは 50 ピクセル、赤い枠線と垂直スクロールのオーバーフロー。ただし、Firefox では、コンテナの下部のパディングが欠落しており、予期しない外観が作成されます。

回避策:

この問題は複雑に見えるかもしれませんが、比較的シンプルな純粋な CSS ソリューションで解決できます:

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

この CSS ルールを追加すると、コンテナーのパディングと同じ高さの空の要素が挿入されます。この要素はプレースホルダーとして機能し、スクロール オーバーフローが発生した場合でもパディングが一貫して維持されるようにします。

デモ:

[Fiddle](https://jsfiddle.net) /rdx8k4mz/) 回避策を紹介します。

以上がFirefox がオーバーフロー: スクロールで要素の下部のパディングを省略するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。