Internet Explorer 10 non applica flessbox su elementi in linea

Question

Secondo Specifiche Flexbox A span flex elemento (bambini diUn contenitore flessibile) deve essere convertito in display:block. Internet Explorer 10 non applica questa trasformazione e quindi FlexBox non funziona su elementi di span (in linea).

qui un codepen di cosa intendo

Posso solo usare i div ma vorrei sapere se questo è un bug di esplorazione e se c'è una correzione migliore che cambiare il codice HTML.

Answer 1

Questo è solo perché il (bozza funzionante) è stato modificato FlexBox, dopo che IE10 è stato rilasciato.

Ecco il pezzo pertinente del testo delle specifiche dalla bozza di lavoro Flexbox CSS, in quanto esiste quando IE10 è stato rilasciato verso la fine del 2012:

.

L'algoritmo layout Flex funziona sulle scatole generate da elementi Flex. Ciascuno dei seguenti diventa un elemento flessibile:

[...]

.

4. Un blocco anonimo avvolto attorno a una corsa contigua di elementi infantili in linea non sostituiti.

Fonte: http://www.w3 .org / tr / 2012 / WD-CSS3-flexbox-20120612 / # Flex-elementi

A span è un "elemento figlio in linea non sostituito". Quindi IE10 avvolge il span (e qualsiasi contenuto in linea adiacente) in un blocco anonimo (corrispondente alle vecchie specifiche) invece di convertire su un blocco (per le nuove specifiche).

Sospetto che Microsoft non volesse modificare questa funzionalità dopo il rilascio, per evitare di interrompere il contenuto già codificato per aspettarsi un particolare comportamento in IE10.

Quindi se si desidera scrivere il contenuto di flexbox che funziona entrambi in IE10 e più recenti versioni del browser, è probabilmente il meglio non dipendere da questo particolare comportamento. (Sii esplicito; cambiare queste campate a divs o danno loro display:block, dal momento che sai che saranno convertiti in blocchi in browser più recenti comunque.)

Answer 2

Hai provato questa proprietà?

display:-ms-inline-flexbox; (per un contenitore di flexbox inline).