flex弹性盒布局在ie浏览器中的那些兼容性问题
1，在IE10和IE11中，⽗容器中flex-direction:column 和 align-items:center，这俩属性同时存在， ⼦容器内容过多会溢出容器。        解决⽅案：给⼦容器加max-width: 100%
2，IE10和IE11下，⽗容器flex-direction:row，⼦容器内容过多会溢出容器
解决⽅案：给⼦容器加max-width: 100%
3，IE11中，⽗容器flex-direction:column，img⽆法保持宽⾼⽐缩放
解决⽅案：给img包⼀层div
borderbox
4，IE10和IE11中，⽗容器flex-direction:row，img⽆法保持宽⾼⽐缩放
解决⽅案：IE10：⽗容器设置align-items IE11:a.给img包⼀层div；b.容器设置align-items
5，IE10和IE11中，flex-direction: row，⼦容器设置flex-basis确切值（auto除外），⼦容器中 box-sizing:border-box不会⽣效        解决⽅案：
a.⼦容器中flex-basis设置auto，且设置width：100%
b. 给⼦项再包裹⼀个容器，把这个容器当成flex容器的⼦项，在这个容器上设置 flex: 0 0                100%。
6，IE10和IE11: 内敛元素不能作为弹性伸缩项⽬，包括:before 和 ::after 这些伪类元素。
IE11修复了这个bug，但是 :before 和 ::after 仍然不能作为伸缩弹性项⽬。
解决⽅案：给内联元素加个 display: block; 即可。
7，给flex简写加 !important，在IE10，只对前两个参数有效，第三个参数⽆效
解决⽅案：这个bug在IE11修复。⽽在IE10，再单独写上flex-bsis即可

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。