如何让ie加载特殊的css

如果你读了这篇文章，你会觉得IE浏览器很是让人头疼。但是如果你是一名优秀的前端开发人员的话，你必须得解决这个问题,我认为你可以用很多方法去解决这个问题，当然，hack除外，如果使用了hack,那么你做的网站将变得非常的危险！因为你使用了这些hack，你将不能保证这些暂时显示正常的页面在以后的浏览器中也是正常的，其中有一种很好的方法可以解决这个问题，那就是使用IE的条件注释语句，IE条件注释语句支持所有的IE版本。

一、为什么使用这种方法呢？

• 首先，这需要一个合理的解决方法
• 请不要使用Hack（因为它很危险！）,让你的代码更加的标准化
• 你应该写出精简高效果的代码
• 这种方法是被认可的（至少微软认可）

需要记住的是：这种选择标签不只在CSS中用到，你也可以用它来有选择的控制JS的加载，甚至可以用它来控制网页中的内容显示。

二、开始编写代码

以下这些代码应该出现在head标签内，链接CSS文件还是常规方法。打开和关闭的标签应该遵循就近原则，这些都是HTML标签的基本知识，在方扩号之间的“IF”和“IE”等字样应该非常的明显，里面的“！”是“不是”的意思，那么“!IE”就是“不是IE”的意思，gt是greater than的缩写，就是高于的意思，gte是greater than or equal的缩写，就是高于或等于的意思，lt是less than的缩写，就是低于的意思，lte是less than or equal的缩写，就是低于或等于的意思。

代码示例：

所有的IE都起作用：

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="all-ie-only.css/>
<![endif]-->

IE以外的浏览器起作用：

<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

只有IE7起作用：

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

只有IE6起作用：

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css"/>
<![endif]-->

只有IE5起作用：

<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="ie5.css"/>
<![endif]-->

只有IE5.5起作用：

<!--[if IE 5.5000]>
	<link rel="stylesheet" type="text/css" href="ie55.css"/>
<![endif]-->

只对IE6及以下的版本起作用：

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie6-and-down.css"/>
<![endif]-->

<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-and-down.css"/>
<![endif]-->

只对IE7及以下的版本起作用：

<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css"/>
<![endif]-->

<!--[if lte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css"/>
<![endif]-->

只对IE8及以下的版本起作用：

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css"/>
<![endif]-->

<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css"/>
<![endif]-->

只对IE6及以上的版本起作用：

<!--[if gt IE 5.5]>
	<link rel="stylesheet" type="text/css" href="ie6-and-up.css"/>
<![endif]-->

<!--[if gte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-and-up.css"/>
<![endif]-->

只对IE7及以上的版本起作用：

<!--[if gt IE 6]>
	<link rel="stylesheet" type="text/css" href="ie7-and-up.css"/>
<![endif]-->

<!--[if gte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-and-up.css"/>
<![endif]-->

只对IE8及以上的版本起作用：

<!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css"/>
<![endif]-->

<!--[if gte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css"/>
<![endif]-->

三、通常对IE6做这样的处理：
(本站就是这样处理的)
对于IE6及以下版本的处理是很具有挑战性的.近来,人们都在呼吁对IE6不要太在意，包括一些企业，一些网络应用，甚至是政府。现在有一个比让这些在 IE6下让人惨不忍睹的网站下地域更好的解决方案，那就是单独写一个针对IE6的精简的CSS样式表，这样至少不会影响人们浏览网页的主要内容。然后再写一个IE6以上版本及其它的浏览器用的正常的CSS，这样不是很好？

<!--[if !IE 6]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->
 
<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->
 
<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->

四、如果你非要用HACK来解决的话……请往下看
只对IE7起作用：

* html #div {
    height: 300px;
}

对非IE7起作用：

#div {
    _height: 300px;
}

只对IE6以上的版本起作用：

#div {
   height/**/: 300px;
}

html->body #div {
      height: 300px;
}

三种方式：

（1）在html页面中条件注释：

1. <!--[if lte IE 6]>  
2.     <LINK rel="stylesheet" type="text/css" href="images/style_IE5.css" />  
3. <![endif]–>   
4.   
5. <!--[if IE 6]>   
6.     <LINK rel="stylesheet" type="text/css" href="images/style_IE6.css" />  
7. <![endif]-->    
8.    
9. <!--[if IE 7]>   
10.     <LINK rel="stylesheet" type="text/css" href="images/style_IE7.css" />  
11. <![endif]-->  

比较符：

lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同

（2）css中添加注释：

1. #example{color:red ;}/*firefox*/    
2. * html #example{color:blue;}/*ie6*/    
3. *+html #example{color:green;}/*ie7*/    

（3）：js判断：

1. <link type="text/css" rel="stylesheet" href="css/screen.css" />  
2. <link type="text/css" rel="stylesheet" href="css/screen.css" />  
3. <script language="JavaScript" type="text/JavaScript">  
4. <!--  
5.     //根据浏览器来选择CSS  
6.     if (!window.XMLHttpRequest) {  
7.         setActiveStyleSheet("IE6.css"); //IE6  
8.     }else if(window.ActiveXObject){  
9.         setActiveStyleSheet("IE7.css"); //IE7  
10.     } else {  
11.         setActiveStyleSheet("FireFox.css"); //Mozilla FireFox、Safari, etc.  
12.     }  
13.   
14.     function setActiveStyleSheet(filename){  
15.         var path = document.getElementsByTagName("link")[1].href;  
16.         document.getElementsByTagName("link")[1].href="css/"+filename;   
17.     }  
18. // -->  
19. <script> 
    

(摘录自Sky Woo‘s  Blog 地址http://www.skywoo.me/translation-how-to-make-the-ie-browser-to-load-a-special-css/)