Pourquoi Firefox omet-il le remplissage au bas des éléments avec débordement : défilement ?

Dépannage de l'omission de remplissage de Firefox avec débordement

Lors de l'implémentation des propriétés CSS overflow : scroll et padding, les utilisateurs peuvent rencontrer un problème où Firefox supprime le remplissage en bas de l'élément, contrairement aux navigateurs tels que Chrome et Safari.

Scénario de problème :

`

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

Dans cet extrait, l'élément a une hauteur de 100px, un remplissage de 50px, un bordure rouge et débordement de défilement vertical. Cependant, dans Firefox, le remplissage au bas du conteneur est manquant, créant une apparence inattendue.

Solution de contournement :

Bien que ce problème puisse sembler déroutant, un problème relativement une simple solution CSS pure peut le résoudre :

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

En ajoutant cette règle CSS, vous insérez un élément vide d'une hauteur égale au remplissage du conteneur. Cet élément sert d'espace réservé, garantissant que le remplissage est constamment maintenu même en cas de débordement de défilement.

Démonstration :

[Fiddle](https://jsfiddle.net /rdx8k4mz/) présentant la solution de contournement.

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!