Pourquoi le comportement de Flexbox diffère-t-il pour les « éléments » selon les navigateurs ?

Comportement de Flexbox dans

Elements

Malgré les tentatives d'application de styles flexbox à

éléments, le comportement reste incohérent d'un navigateur à l'autre.

Dans Firefox et Chrome,

se comporte différemment des autres éléments de niveau bloc lorsqu'on lui attribue une propriété d'affichage flexbox (par exemple, display: flex). Plutôt que d'aligner ses enfants horizontalement, les enfants sont empilés verticalement, comme les éléments de niveau en ligne. Il est intéressant de noter qu'Internet Explorer présente un comportement flexbox normal pour

.

Ce comportement n'est pas considéré comme un bug. Selon le bug 984869, les éléments de bouton sont implémentés différemment dans les navigateurs en raison de leur complexité inhérente, ce qui rend les implémentations CSS soumises à des limitations. Un comportement similaire est observé dans

éléments.

Cependant, Firefox 46 a résolu ce problème en implémentant Flexbox pour

. Cela signifie que les versions récentes de Firefox affichent

éléments avec le comportement flexbox attendu. Pour les navigateurs plus anciens ou les scénarios où une compatibilité cohérente entre navigateurs est nécessaire, il est recommandé d'utiliser un élément wrapper tel que

à l'intérieur de

pour obtenir les mises en page flexbox souhaitées.

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 Property this display flex bug issue 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