Pourquoi Flexbox dans IE10 affiche-t-il des largeurs imprévisibles ?

L'énigme de Flexbox dans IE10 : une énigme multi-navigateurs

Frustré par le comportement énigmatique de flexbox dans IE10 ? Il n'y a pas que toi. Malgré son adoption généralisée dans les navigateurs modernes, la prise en charge de flexbox dans IE10 laisse beaucoup à désirer.

Un exemple classique est un problème de mise en page de formulaire :

`

.flexbox form { </p>
<pre class="brush:php;toolbar:false">display: flex;
flex-direction: row;

}

entrée du formulaire .flexbox[type=submit] {

width: 31px;

}

.flexbox form input[type=text] {

width: auto;
flex: auto 1;

}`

Dans En théorie, cette mise en page devrait restituer un type d'entrée = "submit" avec une largeur fixe de 31 pixels, tandis que le type d'entrée = "texte" remplit de manière transparente l'espace restant. Cependant, dans IE10, l'entrée type="text" est obstinément définie par défaut sur une largeur déroutante de 263 px.

Le nœud du problème réside dans l'implémentation partielle par IE10 de la spécification flexbox. Il prend en charge une version intermédiaire de la spécification, à laquelle manque certaines fonctionnalités. Malheureusement, ces fonctionnalités manquantes empêchent la mise en page de se comporter comme prévu.

Pour résoudre ce problème, envisagez les approches suivantes :

• Employer le préfixe CSS : IE10 répond à certains préfixes CSS, tels que -ms-flex.
• Utilisez un CSS Polyfill : Les polyfills comme Flexboxie peuvent émuler la fonctionnalité flexbox dans IE.
• Retour aux méthodes de mise en page précédentes : Envisagez d'adopter des méthodes de mise en page traditionnelles (par exemple, des flottants ou des tableaux) pour la compatibilité avec IE10.

Restez à l'écoute des mises à jour du navigateur, car les futures versions d'IE pourraient introduire des fonctionnalités plus robustes. Prise en charge des boîtes flexibles. En attendant, ces tactiques peuvent vous aider à naviguer dans l’énigme multi-navigateurs qu’est la flexbox dans IE10.

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!