Comment résoudre le problème de redimensionnement des champs dans Firefox ?

Problème de redimensionnement et comment le résoudre

Problème :

les éléments de certains navigateurs (notamment Firefox) ne parviennent pas à réduire leur largeur lorsque la largeur de l'élément conteneur est réduite. Cela conduit à des barres de défilement horizontales et à un ajustement incorrect dans leur conteneur parent.

Cause fondamentale :

Par défaut, les ensembles de champs ont une largeur minimale de « contenu minimum » appliqué pour eux. Cela peut remplacer toutes les règles de largeur maximale ou de largeur que vous définissez via CSS.

Solution :

Pour permettre aux

s de s'adapter correctement :

1. WebKit et Firefox 53 :

   • Définir la largeur minimale : 0 ; sur l'ensemble de champs pour remplacer la valeur par défaut.

2. Firefox avant 53 :

   • Définir la largeur minimale : 0 ; sur l'ensemble de champs.
   • Modifiez la propriété d'affichage de l'ensemble de champs par l'un des éléments suivants : table-cell, table-column, table-column-group, table-footer-group, table-header-group, table -row ou table-row-group.

   Valeur recommandée : table-cell

Compatibilité des navigateurs :

• Le problème initial a été résolu dans Firefox 53 et supérieur.
• La solution proposée avec @-moz-document est désormais obsolète pour ce problème mais devrait toujours fonctionner dans les anciennes versions de Firefox.

Attention :

Évitez d'utiliser @-moz-document pour cibler Firefox en CSS en dehors de ce problème spécifique. Il existe désormais de meilleures approches pour obtenir un style spécifique au navigateur.

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!