IE浏览器下flex布局的bug
原⽂地址：gitub上的 list，可以看到Flex布局在IE糟糕表现的详细描述。
2. Column flex items set to align-items:center overflow their container
flex 容器如果设置竖排，并且垂直居中，flex⼦项⽬的⽂字会溢出容器。解决办法是给⼦项⽬设置⼀个 max-width:100%。Edge修复了这个bug。
下⾯这段代码，来动⼿看下在IE10、11下的表现。
<style>
.FlexContainer {
align-items: center;
background: hsla(0,0%,0%,.1);
display: flex;
/*display: -ms-flexbox;*/
flex-direction: column;
/*-ms-flex-direction: column;*/
height: 200px;
justify-content: 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>
在IE11下预览，如图：
经过试验发现，就算不设置 flex-direction:column, 这段⽂字依旧义⽆反顾地溢出，⽽不会像在其他浏览器下那样，⾃动换⾏。⽐如Chrome 浏览器：
给⼦项⽬设置 max-width: 100%，并不会对其他浏览器造成额外的影响。
为什么会这样？原来和 flex-shrink 的默认值有关系。IE默认为 0，既空间不⾜，项⽬不缩⼩。
但是如果设置了 flex-shrink 为 1 呢，IE 依旧固执地不缩⼩这个项⽬，原因在于容器同时设置了 flex-direction:column 和 align-items:center。原来是这俩属性在IE10不能并存。只要取消其中⼀个，并把flex-shrink设置为1，该溢出问题就可以得到解决。
4. flex shorthand declarations with unitless flex-basis values are ignored
简写的flex属性，第三个参数 flex-basis 的值如果不写单位，在IE10,11下会该 flex 被忽略。⽐如 flex: 0 1 0%; 这个百分号不能省略。
Edge修复了这个bug。
也可以写成0px，但是推荐⽤0%。因为有些CSS压缩⼯具会把 0px 转换成 0，⽽不会对 0% 下⼿转换。
5. Column flex items don't always preserve intrinsic aspect ratios
竖排弹性容器下，如果⼦项宽度⼤于容器宽度，⼦项并不会随着容器保持宽⾼⽐例。
解决办法是给这个⼦项再包裹⼀个容器，这样⼦项就不再是⼀个伸缩项⽬，尺⼨上就可以正常缩放。
<style>
* 1. Add a wrapper element to house the element with an intrinsic aspect ratio.*/
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: column;
height: 300px;
margin: 1em;
width: 300px;
}
.FlexItem { /* 1 */
flex-shrink: 0; /* 2 */
}
img {
height: auto;
width: 100%;
}
</style>
</head>
<body>
<div class="FlexContainer">
<div class="FlexItem">
<img src="placehold.it/800x200/333">
</div>
</div>
</body>
⽐如这个图⽚宽⾼为800*200，Flex容器宽度300。给图⽚加⼀个容器，图⽚正常缩放。⼩声的说，这个问题貌似Chrome也有呢...
6. The default flex value has changed
新的规范更改了flex的默认值，⽽IE10，11依旧沿⽤旧的默认语法。如图：
Declaration What it should mean What it means in IE 10
(no flex declaration)flex: 0 1 auto flex: 0 0 auto
flex: 1flex: 1 1 0%flex: 1 0 0px
flex: auto flex: 1 1 auto flex: 1 0 auto
flex: initial flex: 0 1 auto flex: 0 0 auto
7. flex-basis doesn't account for box-sizing:border-box
flex-basis如果有⼀个明确的值，既除了auto以外的值，那么该项⽬就相当于有⼀个明确的宽度/⾼度，占据固定空间。
在IE10/11下，盒⼦内容的宽度是 flex-basis 设置的具体的宽度，它会⽆视我们设置的box-sizing:border-box;
如果 flex-basis 值是100%，元素就会溢出容器。⽐如看这段代码在IE下的表现：
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
margin: 1em;
padding: 1em;
}
.FlexItem {
background: hsla(0,0%,0%,.1);
background-clip: padding-box;
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 border</div>
borderbox</div>
</body>
在IE11的效果如下：
这个bug在Edge已经修复。但是基于IE10和11的⼴⼤⽤户，还是得想办法解决。解决办法有两种：
1. flex-basis 设置为 auto，不给它设置具体宽度，然后再给这个元素加⼀个 width:100%。
2. 给⼦项再包裹⼀个容器，把这个容器当成flex容器的⼦项，在这个容器上设置 flex: 0 0 100%。
8. flex-basis doesn't support calc()
IE10 、11，不⽀持 flex 第三个参数 flex-basis 的值为 calc()。如图：
IE11下直接报错，单独写 flex-basis 则可以识别。
⽽在IE10下，⽆论简写不简写，都⽆法识别这个值。
解决办法：
1. 针对IE10和IE11：
.FlexItem {
flex: 0 0 auto;
width: calc(100%/3);
}
2. 如果是IE 11，不采⽤flex简写即可。
.FlexItem {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(100%/3);
}
12. Inline elements are not treated as flex-items （嗯，为什么跳到12了，因为忽略掉的那⼏个是其他浏览器的。本⽂只批判IE）
IE10、11: 内敛元素不能作为弹性伸缩项⽬，包括:before和::after 这些伪类元素。
IE11修复了这个bug，但是:before和::after 仍然不能作为伸缩弹性项⽬。
解决办法是给内联元素加个 display: block; 即可。
13. Importance is ignored on flex-basis when using flex shorthand
flex: 0 0 100%!important;
给flex简写加 !important，在IE10，只对前两个参数有效，第三个参数⽆效。这个bug在IE11修复。⽽在IE10，再单独写上flex-bsis即可：.FlexItemImportantOverride {
flex: 0 0 100%!important;
flex-basis: 100%!important;
}
实际项⽬应⽤中的补充：
在IE10，justify-content 对⼦项⽬的span不起作⽤。这时候把span设置为 display:block; 即可。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论