html - Flexbox 布局在 Internet Explorer 10 中不起作用

Question

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

Answer 1

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

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%;
}

Answer 2

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

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

#wrapper div {width:100%;}