Pourquoi ma Flexbox ne fonctionne-t-elle pas dans Internet Explorer 11 et comment puis-je y remédier ?

Flexbox ne fonctionne pas dans IE : causes et solutions de contournement

Comme vous l'avez constaté, Flexbox peut mal fonctionner dans Internet Explorer 11. Cela est dû à un problème d'analyse avec la propriété flex. Heureusement, il existe plusieurs solutions pour résoudre ce problème :

1. Utiliser les propriétés longues :

Au lieu d'utiliser un raccourci (par exemple, "flex : 0 0 35 %"), décomposez-le en propriétés longues :

flex-grow: 0;
flex-shrink: 0;
flex-basis: 35%;

2. Activer Flex-shrink :

Assurez-vous que flex-shrink est activé en remplaçant "flex : 0 0 35%" par :

flex: 0 1 35%;

3. Gérer les valeurs en pourcentage et sans unités :

Utilisez des variantes avec flex-basis, surtout si vous n'êtes pas sûr de votre version d'IE11 :

flex: 1 1 0;
flex: 1 1 0px;
flex: 1 1 0%;

4. Considérez flex: auto:

Au lieu de "flex: 1", utilisez "flex: auto" (équivalent à "flex: 1 1 auto"). Cela empêchera l'effondrement de l'élément lors du passage de la direction de flexion de la ligne à la colonne.

5. Utiliser les propriétés de largeur/hauteur :

En guise de solution de repli, envisagez de revenir aux propriétés traditionnelles de largeur/hauteur.

6. Optez pour la disposition en bloc :

Dans des cas spécifiques, la disposition en bloc (c'est-à-dire « affichage : bloc ») peut être une alternative viable à la disposition flexible.

Conseils supplémentaires :

• Méfiez-vous des minificateurs qui peuvent convertir 0px en 0 (un problème qui ne affectent 0 %).

• Référez-vous aux ressources suivantes pour plus d'informations :

  • Comportement de l'image dans flexbox : https://stackoverflow.com/q/23051125
  • Propriétés abrégées et propriétés longues dans IE : https://stackoverflow.com/q/24549977

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!