CSS flexbox无法在IE10中运行

Question

在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中运行良好.

Answer 1

IE中尚未(完全)支持Flex布局模式.IE10实现了规范的"补间"版本,这个版本不是完全新的,但仍然有效.

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

这篇CSS-Tricks文章对浏览器使用flexbox(包括IE)有一些建议:http://css-tricks.com/using-flexbox/

编辑:经过一番研究,IE10 flexbox布局模式实施到2012年3月的W3C草案规范:http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

最新的草案是近一年左右:http://dev.w3.org/csswg/css-flexbox/

Answer 2

正如Ennui所提到的,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;
    /**/
}

Answer 3

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