• home > webfront > browser > ie >

    ie10/ie11浏览器上面flex布局淌过的坑的坑——css适配ie问题

    Author:zhoulujun Date:

    首先要介绍的就是ie10,ie11的css hack 识别,比js检测,请注意 *@cc_on ! @* ,复杂不少。虽然,我已经十年没有使用过ie,但是,作为前端开发,还是要挨ie的刀。

    虽然,我已经十年没有使用过ie,但是,作为前端开发,还是要挨ie的刀。

    https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/dn467846(v=vs.85)

    官方给了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