Comment puis-je résoudre les problèmes de mise en page Flexbox dans Internet Explorer 11 ?

Les bizarreries de Flexbox dans Internet Explorer 11 et ses solutions

En cherchant à abandonner les mises en page « flottantes » pour CSS flexbox, les développeurs peuvent rencontrer des défis spécifiques vers Internet Explorer (IE) 11.

Cas 1 : pied de page collant Malheurs

L'exemple "Sticky Footer" de "Solved by Flexbox" présente un bug dans IE 11. Selon caniuse.com, IE 10 et 11 ont des valeurs de flexibilité par défaut différentes du brouillon de spécifications. Y compris l'affichage : flex dans le champ et largeur : 100 % dans la zone résout ce problème.

Cas 2 : Désalignement d'un objet multimédia

L'exemple « Objet multimédia », qui aligne verticalement une image et un texte, fonctionne dans tous les principaux navigateurs mais pas IE 11 en raison de sa gestion de la propriété flex. L'ajustement de flex à 1 0 0 résout le problème, mais Firefox peut nécessiter un piratage ciblé pour restaurer un comportement optimal.

Conclusion

Bien que flexbox soit pris en charge dans tous les navigateurs, des différences subtiles lors de la mise en œuvre peut entraîner des résultats inattendus dans des navigateurs spécifiques. Comprendre ces bizarreries et utiliser les solutions de contournement appropriées garantit un comportement cohérent des flexbox sur toutes les plates-formes.

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!