Firefox がオーバーフロー: スクロールを使用するときにパディングを無視するのはなぜですか?

オーバーフロー使用時に Firefox がパディングを無視する: スクロール

オーバーフロー使用時: パディング スタイルでスクロールすると、Firefox で不可解な問題が発生します。要素のパディングが消えます。この動作は、直接パディング シナリオと継承されたパディング シナリオの両方で観察されます。

原因:

問題の正確な原因は不明ですが、Firefox のレンダリング動作に起因しているようです。ここで、オーバーフローしたコンテンツはパディングを考慮せずにクリップされます。

回避策:

この不一致を補うために、純粋な CSS ソリューションを実装できます:

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

説明:

この CSS スニペットは、コンテナの後に空の疑似要素を追加します。高さを下部のパディングと同じ値に設定し、表示をブロックに設定すると、Firefox にパディングを強制する非表示のバッファーが作成されます。

制限事項:

この回避策で問題は解決されますが、次の注意事項があります。

• スクロール可能なコンテナ内のコンテンツがコンテナの高さを超えてオーバーフローした場合、追加の疑似要素の高さが表示されます。

これを回避するには、JavaScript を使用して、オーバーフローしたコンテンツの高さに基づいて擬似要素の高さを動的に調整し、パディングに対応しながら擬似要素が非表示のままになるようにします。

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