Pourquoi Flexbox ne fonctionne-t-il pas dans IE10 ?

La disposition Flexbox n'est pas valide dans IE10 : Exploration des raisons

Dans IE10, le code suivant ne fonctionne pas correctement :

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

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

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

Phénomène problématique : la largeur de input[type=submit] doit être de 31 px et input[type=text] doit occuper l'espace disponible restant dans le formulaire. Cependant, ce qui se passe, c'est que la largeur de input[type=text] est inexplicablement définie par défaut sur 263px.

Le code fonctionne correctement dans Chrome et Firefox.

Explication :

Dans IE, le mode de mise en page Flexbox n'est pas encore (entièrement) pris en charge nativement. IE10 implémente une version « interpolée » de la spécification, qui n'est pas entièrement à jour, mais qui fonctionne toujours.

Cet article recommande d'utiliser les conseils suivants fournis par CSS-Tricks lors de l'utilisation de la mise en page Flexbox dans IE :

• Utilisez le préfixe Vendor
• pour définir un flex- direction (Même s'il s'agit de la valeur par défaut)
• Évitez d'utiliser des propriétés obsolètes (telles que -webkit-box-flex)

Il est à noter que le mode de mise en page IE10 Flexbox est basé le projet de spécification du W3C de mars 2012, et le dernier projet a été mis à jour depuis environ un an.

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!