Pourquoi Flexbox se comporte-t-il de manière inattendue dans IE10 ?

Problèmes de compatibilité Flexbox dans IE10

Lorsque vous travaillez avec Flexbox dans IE10, vous pouvez rencontrer un comportement inattendu. Bien que la syntaxe Flexbox soit prise en charge, elle fonctionne selon la spécification « tween », qui diffère des implémentations plus récentes.

Dans votre code, le problème survient lors de la spécification de la propriété flex pour input[type=text]. IE10 nécessite une syntaxe légèrement différente, dans laquelle vous devez utiliser -ms-flex au lieu de flex pour une compatibilité entre navigateurs. De plus, assurez-vous que tous les préfixes de fournisseur nécessaires sont inclus pour prendre en charge les anciens navigateurs.

Voici le CSS mis à jour qui devrait résoudre le problème :

.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;
    -ms-flex: auto 1;
}

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!