O Internet Explorer 10 não se aplica o flexbox em elementos de linha
-
21-12-2019 - |
Pergunta
De acordo com a o flexbox especificações um período flex item (filhos de um flex container) deve ser convertido em display:block
.O Internet Explorer 10 não se aplica esta transformação, portanto, uma flexbox não funciona na amplitude (inline) elementos.
Aqui codepen o que quero dizer
Eu só posso usar divs, mas eu gostaria de saber se este é um explorador de bugs e se existe uma melhor correcção de alterar o código html.
Solução
Este é apenas porque o (working draft) flexbox de especificações alterado, após o IE10 foi lançado.
Aqui está o relevante trecho da especificação de texto a partir do CSS Flexbox de rascunho de trabalho, tal como existia quando o IE10 foi lançado no final de 2012:
O flex layout algoritmo opera em caixas gerado pelo flex itens.Cada uma das seguintes torna-se um flex item:
[...]
4.Um bloco anônimos enrolado ao redor de um contíguo de execução do não-substituído inline elementos filho.
Fonte: http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items
Um span
é um "não-substituído inline elemento filho".Isso envolve o IE10 span
(e qualquer adjacentes de conteúdo embutido) em um bloco anônimos (correspondência de idade spec), em vez de convertê-lo para um bloco (de acordo com a nova especificação).
Eu suspeito que a Microsoft não pretende alterar essa funcionalidade depois do lançamento, para evitar a quebra de um conteúdo que já foi codificado para esperar um comportamento em particular no IE10.
Então, se você quer escrever o flexbox de conteúdo que funciona ambos em IE10 e mais recentes do navegador-versões, provavelmente é melhor não depende de um comportamento em particular.(Ser explícito;alterar estas se estende para divs, ou dar-lhes display:block
, já que você sabe que eles estão indo para ser convertido para blocos em navegadores mais recentes, de qualquer maneira.)
Outras dicas
você fez esta propriedade?
display:-ms-inline-flexbox;
(para uma linha flexbox recipiente).