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

概述http://jsfiddle.net/J8rL7/87/ 根据http://caniuse.com/#feat=flexbox 它适用于带有vendor-prefix的IE10. 但事实并非如此！ 更新：我刚刚检查了最新的Firefox,它看起来完全坏了. 为什么？ <div id="wrapper" style="margin:auto;background-color:yellow;heig http://jsfiddle.net/J8rL7/87/

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

它适用于带有vendor-prefix的IE10.

但事实并非如此！

更新：我刚刚检查了最新的firefox,它看起来完全坏了.

为什么？

<div ID="wrapper" >    <div >        <div  >            <div  >1</div>            <div  >2</div>            <div  >3</div>         </div>           <div  >            <div  >Total</div>            <div  >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;}

解决方法 您需要非常仔细地阅读关于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%;}

总结

以上是内存溢出为你收集整理的html – Flexbox布局在Internet Explorer 10中不起作用全部内容，希望文章能够帮你解决html – Flexbox布局在Internet Explorer 10中不起作用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。