Maison > interface Web > tutoriel CSS > Comment résoudre le problème de redimensionnement des champs dans Firefox ?

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

Barbara Streisand
Libérer: 2024-11-14 22:23:02
original
306 Les gens l'ont consulté

How to Fix the Fieldset Resizing Issue in 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é avec les navigateurs :

  • Le problème initial a été corrigé 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 versions plus 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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal