IE10 和 flexbox 的问题——2012 年 3 月的草案不起作用？答案

【问题标题】：Issues with IE10 and flexbox -- March 2012 draft not working?IE10 和 flexbox 的问题——2012 年 3 月的草案不起作用？
【发布时间】：2013-09-14 20:54:04
【问题描述】：

我正在尝试让我的弹性盒布局与 IE10 兼容，据我所知，它使用弹性盒的 March 2012 draft。我已经尝试了每一种奇怪的语法和它的每一种变体，但无济于事。我在 Parallels 中安装的 IE10（我在 Mac 上）的版本是 10.0.9200.16660，这应该使它使用 IE10 flexbox 样式是吗？

这是我的代码：

.uberflex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;

    display: -webkit-flex;
    -webkit-flex-flow: column wrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: flex-start;

    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-pack: center;
    -ms-flex-wrap: wrap;
}

我已经尝试了这些术语的每个变体，带有“-ms-”前缀和没有“-ms-”前缀（它们在 IE11 中使用的），但无济于事。我的 IE 控制台告诉我存在的类的唯一属性是 "display: -ms-flexbox" 位。我是非常非常慢还是我为 IE10 使用了错误的草稿？是否有 IE10 的更新导致 flexbox 无法工作？

任何信息都会非常有帮助，因为我在这个主题上几乎找不到任何信息。谢谢！ :-)

【问题讨论】：

flexiejs.com/playground 在你的 IE10 中工作吗？
是的，这似乎在 IE10 中运行良好！我得试试这个，谢谢！
忽略那个站点，如果你的浏览器实际上不支持它，它似乎使用 JavaScript 来模拟 flexbox 会的样子。试试这个及其演示：css-tricks.com/using-flexbox。顺便说一句，确保 IE 实际上处于 IE10 模式。检查开发者工具 (F12) 或在 head 中添加 <meta http-equiv="X-UA-Compatible" content="IE=edge">。

标签： internet-explorer css internet-explorer-10

【解决方案1】：

这有点猜测，但请尝试将顺序切换到

.uberflex {

    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-pack: center;
    -ms-flex-wrap: wrap;

    display: -webkit-flex;
    -webkit-flex-flow: column wrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: flex-start;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

【讨论】：