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.

Ответы

Ответ 1

Режимы макета макета не полностью (полностью) поддерживаются в 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 режим макета реализован в соответствии со спецификацией проекта W3C в марте 2012 года: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

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

Ответ 2

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

  • У вас должен быть display: -ms-flexbox вместо 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;
    /**/
}

Ответ 3

Обратите внимание, что элементы гибкости должны отображаться: block; в IE10.

Ответ 4

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