recherche

Maison >interface Web >tutoriel CSS >Pourquoi `` ne prend-il pas en charge la mise en page Flexbox dans les navigateurs modernes ?

Pourquoi `` ne prend-il pas en charge la mise en page Flexbox dans les navigateurs modernes ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-18 10:13:10150parcourir

Why Doesn't `` Support Flexbox Layout in Modern Browsers?

Pourquoi

Prise en charge de la mise en page Flex ?

En CSS, l'attribut

L'élément est traité comme un cas particulier en matière de disposition flexible. Malgré les efforts pour le styliser avec display: flex ou display: inline-flex, il se comporte respectivement comme un élément block ou inline-block.

Ce comportement déroute certains développeurs qui observent des résultats inattendus dans des navigateurs comme Firefox et Chrome. , mais je trouve que cela fonctionne de manière déconcertante dans Internet Explorer. S'agit-il d'un bug ou d'un comportement prévu ?

L'explication

D'après les rapports de bugs (bug 984869 et bug 1047590),

—avec  : a un comportement de rendu spécial. Les navigateurs comme Chrome et Firefox n'implémentent pas ces éléments uniquement en CSS, ce qui les fait se comporter comme des boîtes noires du point de vue CSS.

Cela signifie qu'ils ne réagissent pas toujours comme d'autres types d'éléments non spéciaux, tels que comme

. Par exemple, les barres de défilement n'apparaîtront pas sur un avec overflow: scroll, et il ne sera pas non plus rendu sous forme de tableau avec display: table.

De même, pour

, le mode d'affichage flexible n'est pas pris en compte. Ce comportement est conforme à Internet Explorer, qui refuse d'appliquer la disposition flexible à
également.

La solution

Pour obtenir de manière fiable une mise en page spécifique au sein d'un

multi-navigateurs, la solution la plus efficace consiste à utiliser un wrapper
dans le champ
lui-même. Cette approche est similaire à ce qui est nécessaire pour et
dans d'autres navigateurs.

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!

firefox css chrome for this display overflow flex table bug Other
Déclaration：
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
Article précédent：Comment utiliser le pourcentage de remplissage ou la marge basée sur la hauteur du conteneur parent en CSS ?Article suivant：Comment utiliser le pourcentage de remplissage ou la marge basée sur la hauteur du conteneur parent en CSS ?

Articles Liés

Voir plus