说到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：<!--[if IE]><!--您的代码--><![endif]-->，针对IE6及以下版本：<!--[if lt IE 7]><!--您的代码--><[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方式之一，推荐大家去用。
扫一扫
495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
