Pourquoi Firefox masque-t-il le remplissage sur les conteneurs de débordement de défilement et comment pouvons-nous y remédier ?

Pourquoi Firefox masque-t-il le remplissage sur les conteneurs de débordement de défilement ?

Firefox s'écarte des autres navigateurs lors de l'utilisation de la propriété overflow: scroll combinée avec un remplissage sur un élément. Dans Firefox, le remplissage en bas de l'élément disparaît, créant un écart dans le rendu.

Identification du problème

Considérez le code suivant :

<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>

Dans Chrome et Safari, le remplissage inférieur du conteneur est correctement affiché, mais dans Firefox, il disparaît.

Résoudre le problème

Après avoir collaboré avec d'autres développeurs, nous avons trouvé une solution de contournement utilisant du CSS pur :

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

Cela ajoute un élément vide après le conteneur, reproduisant efficacement le remplissage manquant.

Démonstration

Essayez le violon ci-dessous pour voir la solution en action :

[Fiddle]()

Conclusion

Bien qu'elle ne soit pas une solution idéale, cette solution de contournement résout le problème de la disparition du remplissage inférieur dans Firefox lors de l'utilisation de overflow : scroll.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!