ie10/ie11浏览器上面flex布局淌过的坑的坑——css适配ie问题
Author：zhoulujun Date：
虽然，我已经十年没有使用过ie，但是，作为前端开发，还是要挨ie的刀。
官方给了ie9-11的变更说明，但是，其实，都不想去读。指向用写黑魔法，去解决ie问题
首先要介绍的就是ie10，ie11的css hack 识别
/*ie11 css hack*/
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, .classA {}
}
/*ie11注意里面的标点符号*/
/*ie10 css hack*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.classA {}
}
/* IE9 , IE10 ,IE11 rule sets go here */
@media screen and (min-width:0\0) {
.classA {}
}有了这个，就可以处理处理兼容了。当然，也可以nginx识别ie浏览器，加载单独的css
比js检测，请注意/*@cc_on ! @*/，复杂不少。
if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}文本超出溢出
在IE10和IE11中，子容器内容过多会溢出容器
父容器有flex-direction:row属性
父容器中flex-direction:column 和 align-items:center
解决方式：给子容器加max-width: 100%
图片无法保持缩放
父容器flex-direction:column，img无法保持宽高比缩放
解决方式：给img包一层div
父容器flex-direction:row，img无法保持宽高比缩放
解决方式：
IE10：父容器设置align-items
IE11:a.给img包一层div；b.容器设置align-items
flex-direction: row，子容器设置flex-basis确切值（auto除外），子容器中 box-sizing:border-box不会生效
解决：
子容器中flex-basis设置auto，且设置width：100%
给子项再包裹一个容器，把这个容器当成flex容器的子项，在这个容器上设置 flex: 0 0 100%。
转载本站文章《ie10/ie11浏览器上面flex布局淌过的坑的坑——css适配ie问题》,
请注明出处：https://www.zhoulujun.cn/html/webfront/browser/ie/2018_0829_8443.html