Flexbox 布局在 Internet Explorer 10 中不起作用答案

【问题标题】：Flexbox layout does not work in Internet Explorer 10Flexbox 布局在 Internet Explorer 10 中不起作用
【发布时间】：2013-06-13 22:24:32
【问题描述】：

http://jsfiddle.net/J8rL7/87/

根据http://caniuse.com/#feat=flexbox

它应该适用于带有供应商前缀的 IE10。

但事实并非如此！

更新：我刚刚检查了最新的 Firefox，它看起来完全坏了。

为什么？

<div id="wrapper" style="margin:auto;background-color:yellow;height:100%;">
    <div style="width:50px;height:100%;">
        <div class="fluid-column" style="height:80%;background-color:green;">
            <div class="box" style="background-color:#ff99cc;height:25%;">1</div>
            <div class="box" style="background-color:#ff33cc;height:50%;">2</div>
            <div class="box" style="background-color:#ff66cc;height:25%;">3</div> 
        </div>   
        <div class="fix-column" style="height:20%;background-color:violet">
            <div class="box" style="background-color:orange;height:50%;">Total</div>
            <div class="box" style="background-color:blue;height:50%;">Test</div>
        </div>
    </div>
</div>

body, html{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

div{
    text-align:center;
   }

.box
{
    display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;
    display:-ms-box;-ms-box-pack:center;-ms-box-align:center;
    display:-moz-box;-moz-box-pack:center;-moz-box-align:center;
}

【问题讨论】：

在 IE10、Chrome 和 Safari 中对我来说看起来是一样的。它应该是什么样子的？您能否添加一个图像模型来说明它应该如何显示，或者您想要实现的布局的详细描述？
不应该是-ms-flex-pack, -ms-flex-align吗？
@MattCoughlin 在 Chrome 中，文本是垂直对齐的。但不是在 FF 和 IE10 中，并且 -ms-box-align:center 应该在使用 -ms-box-orientation:vertically 时垂直对齐它。我只是忘了复制/粘贴它......但它也不适用。
垂直对齐什么？中心？最佳？底部？
查看 .box 类的垂直居中。

标签： html css internet-explorer-10 flexbox

【解决方案1】：

您需要仔细阅读有关 caniuse 的说明。 “部分支持”是指支持两个较旧的草稿之一，并且他们没有说明哪个浏览器支持哪个草稿。 IE10 支持March 2012 draft，而且它是唯一已知的这样做的。

http://codepen.io/cimmanon/pen/ApHEy

.box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  /* fix for old FF */
  width: 100%;
}

【讨论】：

好的，然后用 FF21 交换 IE10（现在可以使用），因为那个坏了：jsfiddle.net/J8rL7/98这是一个错误吗？
“最新”的 Firefox 仍然使用其过时的 2009 年实现，该实现充满了错误。我添加了一个修复程序。
嘿，它甚至适用于最新的 safari 5.1.7 我很惊讶。
顺便说一句。感谢您的codepen链接不知道。它的页面刷新速度比 jsfiddle 快得多！

【解决方案2】：

对于 Firefox ，您需要为要查看堆叠的元素指定宽度。

http://jsfiddle.net/J8rL7/101/

#wrapper div {width:100%;}

【讨论】：