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.

Foi útil?

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).

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top