[英]Flexbox layout does not work in Internet Explorer 10
http://jsfiddle.net/J8rL7/87/ http://jsfiddle.net/J8rL7/87/
According to http://caniuse.com/#feat=flexbox 根据http://caniuse.com/#feat=flexbox
It should work for IE10 with vendor-prefix. 它应该适用于带有vendor-prefix的IE10。
But it does not! 但事实并非如此!
UPDATE: And I just checked in latest Firefox it looks totally broken. 更新:我刚刚检查了最新的Firefox它看起来完全坏了。
Why? 为什么?
<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;
}
You need to read the notes very closely on caniuse. 您需要非常仔细地阅读关于caniuse的说明。 "Partial support" refers to supporting one of two older drafts, and they don't make a note of which browser supports which draft.
“部分支持”是指支持两个旧草稿中的一个,并且它们没有记录哪个浏览器支持哪个草稿。 IE10 supports the March 2012 draft , and it's the only one that's known to do so.
IE10支持2012年3月的草案 ,而且它是唯一一个已知的草案 。
http://codepen.io/cimmanon/pen/ApHEy 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%;
}
For Firefox , you need to give a width to the elements you want to see stacking. 对于Firefox,您需要为要查看堆叠的元素指定宽度。
http://jsfiddle.net/J8rL7/101/ http://jsfiddle.net/J8rL7/101/
#wrapper div {width:100%;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.