码迷,mamicode.com
首页 > 其他好文 > 详细

兼容低版本 ie 的思路

时间:2018-08-01 20:45:04      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:nav   useragent   思考   ie8   css hack   disabled   某个版本   type   动态加载   

兼容处理 ie 低版本,推荐三条路径:

 

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

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

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

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

4、\9\0 区分 ie9、10 与 ie其他低版本 ( text-indent: 0\9\0; 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");
 

兼容低版本 ie 的思路

标签:nav   useragent   思考   ie8   css hack   disabled   某个版本   type   动态加载   

原文地址:https://www.cnblogs.com/justSmile2/p/9403340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!