CSS flexbox не работает в IE10

в IE10 этот код работает неправильно:

.flexbox form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
}

.flexbox form input[type=submit] {
    width: 31px;
}

.flexbox form input[type=text] {
    width: auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex: auto 1;
    -moz-flex: auto 1;
    -ms-flex: auto 1;
    -o-flex: auto 1;
    flex: auto 1;
}

что должно произойти, заключается в том, что input[type=submit] должен быть шириной 31px, с input[type=text] занимая остальную часть доступного пространства внутри form. Что происходит input[type=text] просто по умолчанию 263px по какой-то причине.

это отлично работает в Chrome и Firefox.

3 ответов


режимы компоновки Flex еще не (полностью) поддерживаются в IE. IE10 реализует версию спецификации" tween", которая не является полностью новой, но все еще работает.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

в этой статье CSS-Tricks есть некоторые советы по кросс-браузерному использованию flexbox (включая IE): http://css-tricks.com/using-flexbox/

edit: после немного больше исследований, IE10 flexbox режим компоновки реализован текущий к марту 2012 W3C проект спецификации:http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

самый последний проект на год или около того более поздний:http://dev.w3.org/csswg/css-flexbox/


Как упоминалось Ennui, IE 10 поддерживает -ms префиксная версия Flexbox (IE 11 поддерживает ее неподготовленной). Ошибки я вижу в вашем коде:

  • вы должны есть!--2--> вместо display: -ms-flex
  • Я думаю, вы должны указать все 3 flex значения, как flex: 0 1 auto чтобы избежать двусмысленности

поэтому окончательный код...

.flexbox form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;

    /* Direction defaults to 'row', so not really necessary to specify */
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
}

.flexbox form input[type=submit] {
    width: 31px;
}

.flexbox form input[type=text] {
    width: auto;

    /* Flex should have 3 values which is shorthand for 
       <flex-grow> <flex-shrink> <flex-basis> */
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -o-flex: 1 1 auto;
    flex: 1 1 auto;

    /* I don't think you need 'display: flex' on child elements * /
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    /**/
}

IE10 использует старый синтаксис. Итак:

display: -ms-flexbox; /* will work on IE10 */
display: flex; /* is new syntax, will not work on IE10 */

см.css-tricks.com/snippets/css/a-guide-to-flexbox:

(Tween) означает нечетный неофициальный синтаксис из [2012] (например, display: flexbox;)