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
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即可