2013-09-11 1 views
5

Я стараюсь, чтобы мой формат flexbox был совместим с IE10, что, насколько мне известно, использует flexboxes March 2012 draft. Я пробовал каждый безумный синтаксис и каждый его вариант, но безрезультатно. IE10, который я установил в Parallels (я нахожусь на Mac), это версия 10.0.9200.16660, которая должна использовать его в стиле гибкого окна IE10?Проблемы с IE10 и flexbox - март 2012 черновик не работает?

Вот мой код:

.uberflex { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    justify-content: flex-start; 
    align-items: flex-start; 

    display: -webkit-flex; 
    -webkit-flex-flow: column wrap; 
    -webkit-justify-content: flex-start; 
    -webkit-align-items: flex-start; 

    display: -ms-flexbox; 
    -ms-flex-direction: column; 
    -ms-flex-pack: center; 
    -ms-flex-wrap: wrap; 
} 

Я попробовал то, что кажется, что каждый varition этих терминов с префиксом «-ms-» и без префикса «-ms-» (то, что они используют в IE11) но безрезультатно. Единственное свойство класса, на котором моя консоль IE говорит мне, что существует «дисплей: -ms-flexbox» бит. Я очень, очень медленный или я использую неправильный проект для IE10 ?? Было ли обновление для IE10, которое делает flexbox не работать или что-то еще?

Любая информация была бы очень полезной, так как мне было очень мало на эту тему. Спасибо! :-)

+1

ли http://flexiejs.com/playground/ работы в вашем IE10? – thirtydot

+0

Да, похоже, что работает в IE10! Мне нужно поиграть с этим, спасибо! – shanling

+2

Игнорируйте этот сайт, похоже, использует JavaScript для подражания тому, что будет выглядеть в Flexbox *, если ваш браузер фактически не поддерживает его. Попробуйте это и его демо: http://css-tricks.com/using-flexbox/. В стороне, убедитесь, что IE действительно находится в режиме IE10. Проверьте инструменты разработчика (F12) или добавьте '' inside 'head'. – thirtydot

ответ

1

Это немного догадки, но попробуйте переключить заказ на

.uberflex { 

    display: -ms-flexbox; 
    -ms-flex-direction: column; 
    -ms-flex-pack: center; 
    -ms-flex-wrap: wrap; 

    display: -webkit-flex; 
    -webkit-flex-flow: column wrap; 
    -webkit-justify-content: flex-start; 
    -webkit-align-items: flex-start; 

    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    justify-content: flex-start; 
    align-items: flex-start; 
} 
Смежные вопросы