兼容IE浏览器各版本的方法技术

最新推荐文章于 2021-12-22 10:01:12 发布

chouji8162

最新推荐文章于 2021-12-22 10:01:12 发布

阅读量342

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/854746/blog/163835

版权

说到IE浏览器兼容性问题，大家就纠结了。于是，开始写各种各样的hack进行兼容。。。当然，这其中也有不用的方法。

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，我在这里所说的CSS Hack主要是针对IE浏览器。　　

类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，示例如下：　

#tip{  
background:blue;/*背景变蓝色*/  
background:red\9;/*IE8背景变红色*/  
*background:black;/*IE7背景变黑色*/  
_background:orange;/*IE6背景变橘色*/  
}

选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}，示例如下：

/*1、IE6以及IE6以下版本浏览器*/
* html .demo {color: green;}
/*2、仅仅IE7浏览器*/
*:first-child+html .demo {color: green;}
/*3、除IE6之外的所有浏览器（IE7-9, Firefox,Safari,Opera）*/
html>body .demo {color: green;}
/*4、IE8-9,Firefox,Safari,Opear*/
html>/**/body .demo {color: green;}
/*5、IE9+*/
:root .demo {color: red;}

HTML头部引用(if IE)Hack：针对所有IE：<![endif]-->，针对IE6及以下版本：<[endif]-->这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效：

<link rel="stylesheet" href="css/style.css" />
<!--[if IE]><link rel="stylesheet" href="css/ie.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" /><![endif]-->

用这种方法的话，对IE浏览器用户，会增加请求数量，影响访问速度；一个元素的样式存放在几个地方，也不便于维护，容易出错。

那么还有更好的方法么？有。对于这种方法，我觉得像是对上一中方法

很多国外网站的<!DOCTYPE html>和< HEAD >之间都会有一段注释,如:

<!--[if lt IE 7 ]> <html lang="en" class="ie6 ielt8"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 ielt8"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

这种方法也是现在很多人都在用的了，通过这种方法，我们可以很容易地在同一个CSS样式表里写一些针对IE各版本的样式差异了，而不用像第三种方法那样分几个css文件：先判断用户用的哪个IE版本，然后在标签上加上该版本的class，这样可以方便hack了。

在css文件里可以写：

.ie6 .class{}/* 样式! */;
.ie7 .class{/* 样式! */};

jQuery 里可以这么写：

if ($('.ie6').length) { /* 代码! */ }

我觉得，这是目前最好的hack方式之一，推荐大家去用。

转载于:https://my.oschina.net/u/854746/blog/163835

chouji8162

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容IE浏览器各版本的方法技术

说到IE浏览器兼容性问题，大家就纠结了。于是，开始写各种各样的hack进行兼容。。。当然，这其中也有不用的方法。 CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，我在这里所说的CSS Hack主要是针对...
复制链接

扫一扫