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)

еттвин» версия спецификации, которая не совсем новая, но все еще работает.

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

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

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

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

-ms версия Flexbox с префиксом (IE 11 поддерживает его без префикса). Ошибки, которые я вижу в вашем коде:

У тебя должно бытьdisplay: -ms-flexbox вместоdisplay: -ms-flexЯ думаю, что вы должны указать все 3flex значения, как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;
    /**/
}
</flex-basis></flex-shrink></flex-grow>

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:

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

ВАШ ОТВЕТ НА ВОПРОС