Firefox がスクロール オーバーフロー コンテナーのパディングを非表示にするのはなぜですか? それを修正するにはどうすればよいですか?

Firefox がスクロール オーバーフロー コンテナーのパディングを非表示にするのはなぜですか?

Firefox は、要素のパディングと組み合わせて overflow:scroll プロパティを使用すると、他のブラウザーから逸脱します。 Firefox では、要素の下部のパディングが消え、レンダリングに不一致が生じます。

問題の特定

次のコードを検討してください:

<code class="css">.container {
  height: 100px;
  padding: 50px;
  border: solid 1px red;
  overflow-y: scroll;
}</code>

<code class="html"><div class="container">
  <ul>
    <!-- ... list items ... -->
  </ul>
</div></code>

Chrome と Safari では、コンテナの下部パディングは正しく表示されますが、Firefox では消えます。

問題の解決

他の開発者と協力した後、純粋な CSS を使用する回避策を見つけました。

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

これにより、コンテナの後に空の要素が追加され、不足しているパディングが効果的に複製されます。

デモ

以下のフィドルを試して、実際のソリューションを確認してください:

[Fiddle]()

結論

理想的な解決策ではありませんが、この回避策は、overflow:scroll を使用したときに Firefox で下部のパディングが消える問題に対処します。

以上がFirefox がスクロール オーバーフロー コンテナーのパディングを非表示にするのはなぜですか? それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。