Internet Explorer 10 n'applique pas flexbox sur les éléments en ligne

Question

Selon spécifications de la boîte flexible un élément span flex (enfants d'un conteneur flex) doit être converti en display:block.Internet Explorer 10 n'applique pas cette transformation et donc flexbox ne fonctionne pas sur les éléments span (inline).

Voici un codepen de ce que je veux dire

Je peux simplement utiliser des divs mais j'aimerais savoir s'il s'agit d'un bug de l'explorateur et s'il existe une meilleure solution que de changer le code HTML.

Answer 1

C'est simplement parce que la spécification (version de travail) de la flexbox a changé après la sortie d'IE10.

Voici la partie pertinente du texte de spécification de la version de travail de CSS Flexbox, telle qu'elle existait lorsque IE10 a été publié vers la fin de 2012 :

L'algorithme de mise en page flex fonctionne sur les cases générées par les éléments flex.Chacun des éléments suivants devient un élément flexible :

[...]

4.Un bloc anonyme enroulé autour d'une série contiguë d'éléments enfants en ligne non remplacés.

Source: http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items

UN span est un "élément enfant en ligne non remplacé".Donc IE10 enveloppe le span (et tout contenu en ligne adjacent) dans un bloc anonyme (correspondant à l'ancienne spécification) au lieu de le convertir à un bloc (selon la nouvelle spécification).

Je soupçonne que Microsoft ne voulait pas modifier cette fonctionnalité après la sortie, pour éviter de casser du contenu déjà codé pour s'attendre à un comportement particulier dans IE10.

Donc, si vous voulez écrire du contenu flexbox qui fonctionne les deux dans IE10 et versions de navigateur plus récentes, il est probablement préférable de ne pas dépendre de ce comportement particulier.(Soyez explicite ;changez ces étendues en divs, ou donnez-leur display:block, puisque vous savez qu'ils seront de toute façon convertis en blocs dans les navigateurs les plus récents.)

Answer 2

as-tu essayé cette propriété ?

display:-ms-inline-flexbox; (pour un conteneur flexbox en ligne).