48

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

4

3 回答 3

43

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/

于 2013-08-02T14:32:57.470 回答
39

正如 Ennui 所提到的，IE 10 支持-msFlexbox 的前缀版本（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;
    /**/
}
于 2015-07-17T06:30:14.827 回答
11

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

于 2015-10-22T09:42:50.643 回答