Internet Explorer 10 не применяет flexbox к встроенным элементам

Question

В соответствии с характеристики флексбокса элемент гибкой области диапазона (дочерние элементы гибкого контейнера) должен быть преобразован в display:block.Internet Explorer 10 не применяет это преобразование, поэтому flexbox не работает с элементами диапазона (встроенными).

Здесь кодекс того, что я имею в виду

Я могу просто использовать элементы div, но мне хотелось бы знать, является ли это ошибкой проводника и есть ли лучшее решение, чем изменение HTML-кода.

Answer 1

Это просто потому, что спецификация flexbox (рабочий проект) изменилась после выпуска IE10.

Вот соответствующий фрагмент текста спецификации из рабочего проекта CSS Flexbox в том виде, в каком он существовал на момент выпуска IE10 в конце 2012 года:

Алгоритм гибкого макета работает с блоками, созданными гибкими элементами.Каждое из следующих элементов становится гибким элементом:

[...]

4.Анонимный блок, заключенный вокруг непрерывного ряда незаменяемых встроенных дочерних элементов.

Источник: http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex-items

А span является «незаменяемым встроенным дочерним элементом».Таким образом, IE10 оборачивает span (и любой соседний встроенный контент) в анонимном блоке (соответствующем старой спецификации) вместо его преобразования к блок (согласно новой спецификации).

Я подозреваю, что Microsoft не хотела менять эту функциональность после выпуска, чтобы не нарушать уже запрограммированный контент, ожидающий определенного поведения в IE10.

Итак, если вы хотите написать работающий контент flexbox оба в IE10 и более поздних версиях браузера, вероятно, лучше не зависеть от этого конкретного поведения.(Будьте откровенны;измените эти промежутки на div или дайте им display:block, поскольку вы знаете, что в новых браузерах они все равно будут преобразованы в блоки.)

Answer 2

вы пробовали это свойство?

display:-ms-inline-flexbox; (для встроенного контейнера flexbox).