Flex布局之 IE11浏览器的兼容性总结：

 

1.flex 布局的问题：不支持flex-wrap，flex-flow或align-content属性

IE 11 浏览器，不支持flex-wrap，flex-flow或align-content属性 ，如果 想用flex-wrap 宽度不够折行显示，需要给父级盒子加一个固定宽度。

 

 

2.flex 布局的问题：flex:1; 大多数flex布局，在IE11 中存在很多兼容性问题，给其盒子添加宽高即可解决。

IE 11 浏览器， flex:1; 属性不起作用 ，如果 想用flex：1，占满剩余宽高。

在IE10中，默认值flex是，0 0 auto而不是0 1 auto最新规范中定义的值。

需要手动设置，flex: 0 1 auto; 如果知道内容得宽高，最好具体到值，例如： flex: 0 1 50px;

 

 

3.定位问题：position

IE 11 浏览器，不像其他浏览器具有自动补全代码的功能，就像个傻逼一样，其他浏览器 写 position:absolute; top:0px; 浏览器会按照我们期望的展示，因为它们比较友好，

会默认 left：0px 展示，但是 IE 11 是不会这样有好的， 所以你以后写代码一定要写全一点，不能图简单方便，多测测浏览器的兼容性。

 

4.动态渲染元素问题

IE 11 浏览器，动态渲染元素，如果父盒子是靠子盒子的内容撑开，IE11 还没等内容渲染完，就把css样式已经加载完毕了，但是真正等内容加载出来时，其父盒子没有被撑开，

这时，我们只需要在凡是动态渲染，撑开父盒子内容的地方，一定要记得给其子盒子，display:block; 这样就可以解决，渲染出来没有高度的问题了。因为有些块级元素，本身 就是块级，

所以一般我们都不会写display:block; 在其他浏览器肯定没问题，但是谁叫你们产品兼容IE11 呢，别人就是这么嚣张，就是不按照你想要的来展示，兼容性真恶心 。