Flex布局在IE中的兼容性问题总结
Flex布局在IE中的兼容性问题总结
以下代码片段没有特别说明，则均为有兼容性问题的代码
一、在IE10和IE11中，父容器中flex-direction:column 和 align-items:center，这俩属性同时存在， 子容器内容过多会溢出容器
<style>
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: column;
height: 200px;
justify-content: center;
align-items: center;
margin: 1em;
padding: 2em;
width: 300px;
}
.FlexItem {
background: hsla(0,0%,0%,.1);
padding: 1em;
}
style>
<script src="js/jquery-1.9.1.min.js">script>
head>
<body>
<div class="FlexContainer">
<div class="FlexItem">
The contents inside of this box are overflowing their container.
div>
div>
body>
解决方式：给子容器加max-width: 100%
二、IE10和IE11下，父容器flex-direction:row，子容器内容过多会溢出容器
<style>
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: row;
height: 200px;
margin: 1em;
padding: 2em;
width: 300px;
}
.FlexItem {
background: hsla(0,0%,0%,.1);
padding: 1em;
}
style>
head>
<body>
<div class="FlexContainer">
<div class="FlexItem">
The contents inside of this box are overflowing their container.
div>
div>
body>
解决方式：给子容器加max-width: 100%
三、IE11中，父容器flex-direction:column，img无法保持宽高比缩放
<style>
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: column;
height: 300px;
margin: 1em;
width: 300px;
}
img {
height: auto;
width: 100%;
}
style>
head>
<body>
<div class="FlexContainer">
<img src="http://placehold.it/800x200/333">
div>
body>
解决方式：给img包一层div
四、IE10和IE11中，父容器flex-direction:row，img无法保持宽高比缩放
<style>
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: row;
height: 300px;
margin: 1em;
width: 300px;
}
img {
height: auto;
width: 100%;
}
style>
head>
<body>
<div class="FlexContainer">
<img src="http://placehold.it/800x200/333">
div>
body>
解决方式：
IE10：父容器设置align-items
IE11:a.给img包一层div；b.容器设置align-items
五、IE10和IE11中，flex-direction: row，子容器设置flex-basis确切值（auto除外），子容器中 box-sizing:border-box不会生效
<style>
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: row;
padding: 1em;
}
.FlexItem {
background: hsla(0,0%,0%,.1);
border: 1em solid transparent;
box-sizing: border-box;
flex: 0 0 100%;
padding: 1em;
text-align: center;
}
style>
head>
<body>
<div class="FlexContainer">
<div class="FlexItem">Item with padding and borderdiv>
div>
body>
解决：
a.子容器中flex-basis设置auto，且设置width：100%
b. 给子项再包裹一个容器，把这个容器当成flex容器的子项，在这个容器上设置 flex: 0 0 100%。
六、IE10和IE11: 内敛元素不能作为弹性伸缩项目，包括:before 和 ::after 这些伪类元素。
IE11修复了这个bug，但是 :before 和 ::after 仍然不能作为伸缩弹性项目。
解决：给内联元素加个 display: block; 即可。
七、给flex简写加 !important，在IE10，只对前两个参数有效，第三个参数无效。
flex: 0 0 100%!important;
解决：
这个bug在IE11修复。而在IE10，再单独写上flex-bsis即可