Comment puis-je résoudre les problèmes de Flexbox dans IE10 ?

Dépannage des problèmes de Flexbox dans IE10

L'implémentation de Flexbox dans IE10 peut présenter des comportements inattendus en raison de sa prise en charge non native. Cela se produit car IE10 utilise une version obsolète de la spécification flexbox, ce qui introduit des limitations.

Pour résoudre ces problèmes, il est important de comprendre ce qui suit :

• Flexbox n'est pas entièrement pris en charge dans IE en tant que fonctionnalité native.
• IE10 implémente une version « interpolée » de la spécification, qui correspond au projet du W3C de mars 2012.
• La version actuelle de la spécification flexbox a subi plusieurs révisions depuis alors.

Problème spécifique signalé

Le problème signalé avec flexbox ne fonctionnant pas correctement dans IE10 provient de l'utilisation de la syntaxe flexbox moderne dans un code destiné à la compatibilité avec IE. . Plus précisément :

• La déclaration display: flex utilise une syntaxe qui n'est pas prise en charge dans IE10.

Solution

Pour résoudre ce problème, ajustez le code pour utiliser la syntaxe prise en charge dans l'implémentation "tween" d'IE10, qui inclut des propriétés préfixées :

.flexbox form {
    display: -ms-flex;
    -ms-flex-direction: row;
}

.flexbox form input[type=submit] {
    width: 31px;
}

.flexbox form input[type=text] {
    width: auto;
    display: -ms-flex;
    -ms-flex: auto 1;
}

Ces modifications ciblent l'implémentation flexbox "tween" d'IE et devraient restaurer le comportement attendu.

Ressources supplémentaires

Pour plus d'informations sur la compatibilité flexbox entre navigateurs, reportez-vous aux ressources suivantes :

• [Guide Mozilla Flexbox](https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
• [CSS-Tricks : Utilisation de Flexbox](http://css-tricks.com/using- flexbox/)
• [Spécification Flexbox du W3C](http://dev.w3.org/csswg/css-flexbox/)

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!