Pourquoi `display: flex` ne fonctionne-t-il pas sur les `` éléments ?

Pourquoi l'élément Fieldset ne se comporte pas comme un conteneur Flex

Style d'un élément fieldset avec display: flex ou display: inline-flex peut vous laisser perplexe car il se comporte différemment que prévu. Au lieu d'agir comme un conteneur flexible, il se comporte respectivement de la même manière que les éléments de blocage ou de blocage en ligne.

Bogue ou comportement attendu ?

Ce comportement dans Firefox et Chrome (tout en travaillant étonnamment sous IE) n'est pas un bug. Selon le bug 984869, les éléments de bouton sont rendus avec un traitement spécial et peuvent ignorer les propriétés CSS telles que l'affichage. Ce comportement n'est pas propre aux boutons ; Les éléments Fieldset, Table et Del présentent également des anomalies de rendu similaires.

La solution

Pour disposer de manière fiable les enfants d'un élément Fieldset comme spécifié dans la disposition de boîte flexible CSS , vous devrez utiliser une solution de contournement : enveloppez vos éléments enfants dans un conteneur div au sein de l'ensemble de champs. Cette approche fonctionne de manière cohérente sur tous les navigateurs, garantissant la mise en page souhaitée dans tous les cas.

Firefox 46 et au-delà

Cependant, il y a une bonne nouvelle pour les utilisateurs de Firefox : Firefox 46 et versions ultérieures. les implémentations prennent en charge Flexbox pour l'élément fieldset (voir bug 1230207). Cela signifie que vous pouvez utiliser display: flex sur les ensembles de champs sans avoir besoin de solutions 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!