Pourquoi les ensembles de champs refusent-ils de se réduire dans Firefox ?

Problème de largeur minimale :

Dans Firefox et les anciennes versions de WebKit,

les éléments héritent d'une largeur minimale de « min-content », les empêchant de se rétrécir en dessous de la largeur de leur contenu. Ce problème peut entraîner des problèmes lorsque vous vous attendez à ce que

éléments à redimensionner en fonction de la largeur de leur conteneur parent.

Solution (pour WebKit et Firefox 53) :

Remplacez le comportement par défaut en définissant min-width : 0 ; sur le

.

Solution (pour Firefox Pre-53) :

Pour que le

s'afficher correctement dans les versions antérieures de Firefox, modifiez sa propriété d'affichage en table-cell. Pour masquer ce correctif aux autres navigateurs, utilisez @-moz-document :

@-moz-document url-prefix() {
  fieldset {
    display: table-cell;
  }
}

Explication :

Ce problème provient d'incohérences dans la façon dont les navigateurs gèrent à moins qu'ils ne soient rendus sous forme d'éléments de tableau.

Attention :

L'utilisation de @-moz-document est sûre dans ce cas précis, évitez de l'utiliser pour cibler Firefox en général car il est obsolète.

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!