兼容低版本 ie 的思路

Posted 2020-12-27 justsmile2

兼容处理 ie 低版本，推荐三条路径：

 

一、css hack，适用于代码初建阶段，也就是说在开发功能之前要思考的问题点，这里总结几个常见的：

1、- 区分 ie6 与 ie7以上 （ -text-indent: 0;  ie6识别）

2、* 区分标准 ie7 与 ie8以上标准模式 （ *text-indent: 0; ie7识别 ）

3、 区分标准 ie8+ 与 ie其他低版本（ text-indent: 0; ie8+识别 ）

4、9 区分 ie9、10 与 ie其他低版本 （ text-indent: 09; ie9、10识别 ）

5、区分 edge 与 ie （ edge支持的 ）

@supports (-ms-accelerator:true) {
.add {
left:34px;
}
}
_:-ms-lang(x),
.add {
left:34px;
}

6、然后，自上而下顺序覆盖。

 

二、条件注释 

1、小于等于某个版本

        <!--[if lte IE 7]>

        <link href="../css/a.css" rel="stylesheet">  

        <![endif]-->

2、等于

        <!--[if  IE 7]>

        <link href="../css/a.css" rel="stylesheet">  

        <![endif]-->

 

<!--[if IE 7]>

<style index="index" data-compress="strip">
#u1 a.mnav,#u1 a.mnav:visited,#u1 a.lb,#u1 a.lb:visited,#u1 a.pf,#u1 a.pf:visited,#u1 a.bri,#u1 a.bri:visited{font-family:simsun;}
</style>
<![endif]-->

3、大于等于

        <!--[if gte IE 7]>

        <link href="../css/a.css" rel="stylesheet">  

        <![endif]-->

 

三、能力判断后动态加载资源/添加处理程序

1.能力判断

return ‘placeholder‘ in document.createElement(‘input‘);

return navigator.userAgent.indexOf("7.0")>0

2.动态加载

$("<link>")

.attr({

rel: "stylesheet",

type: "text/css",

href: "/css/disabled.css"

})

.appendTo("head");