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

Question

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

4

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

- HelloWorld

难道不应该是-ms-flex-pack，-ms-flex-align吗？ - stackErr

@MattCoughlin 在 Chrome 中，文本是垂直对齐的。但在 FF 和 IE10 中不是，而 -ms-box-align:center 应该在使用 -ms-box-orientation:vertically 时进行垂直对齐。我只是忘记复制/粘贴它了...但即使这样也不能正常工作。 - HelloWorld

垂直对齐什么？居中？顶部？底部？ - cimmanon

请看 .box 类，它垂直居中。 - HelloWorld

不，我并没有放弃，只是在尝试不同的东西:) 我也正在考虑用表格而不是div-inline-blocks或float创建我的图表/图解... 因为图表/图解实际上就是表格数据... - HelloWorld

显示剩余2条评论

2个回答

0

对于Firefox浏览器，您需要为希望堆叠显示的元素设置宽度。

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

#wrapper div {width:100%;}

- G-Cyrillus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cimmanon · Accepted Answer

您需要仔细阅读 caniuse 上的注释。"Partial support" 指支持两个旧草案中的一个，他们没有注明哪个浏览器支持哪个草案。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%;
}