Pourquoi le remplissage inférieur disparaît-il dans Firefox lors de l'utilisation de Overflow : Scroll ?

Remplissage ignoré dans Firefox avec débordement : défilement

Dans certains scénarios impliquant le débordement de CSS : la propriété scroll et le remplissage, Firefox présente un comportement particulier où le remplissage au bas d'un élément disparaît. Cela contraste avec les fonctionnalités attendues observées dans les navigateurs comme Chrome et Safari.

Le problème survient lorsque vous combinez la propriété overflow: scroll, qui permet le défilement vertical de l'élément, avec la propriété padding, qui définit la espacement entre le contenu de l'élément et sa bordure. Dans Firefox, le remplissage en bas de l'élément disparaît, laissant le contenu visible s'étendre au-delà du bord de la zone de remplissage définie.

Pour illustrer le problème, considérons le code CSS suivant :

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

ul,
li {
  padding: 0;
  margin: 0;
}</code>

Lorsque ce code est appliqué à une structure HTML comme celle ci-dessous, vous remarquerez le remplissage manquant en bas de l'élément dans Firefox, alors qu'il apparaît comme prévu dans les autres navigateurs :

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

[ Voir la démo](URL de la démo)

Pour résoudre ce problème, une solution CSS pure et simple peut être utilisée :

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

Ce code CSS ajoute un élément après l'élément conteneur avec une hauteur fixe de 50px (équivalent au remplissage inférieur). En insérant cet élément, vous créez un espace visible qui compense le rembourrage manquant, résolvant ainsi efficacement le problème.

Il est important de noter que cette solution, bien que fonctionnelle, n'est pas une solution idéale ou élégante. Cependant, il fournit une solution de contournement jusqu'à ce qu'une solution plus raffinée soit disponible.

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!