单独对IE6兼容进行处理的方法揭秘

你对单独对IE6兼容进行处理的方法是否了解，这里和大家分享一下，IE6兼容的***步就是单独对IE进行兼容，你针对IE6所写的代码只影响IE6。

单独对IE6兼容进行处理的方法

IE6兼容的***步就是单独对IE进行兼容，你针对IE6所写的代码只影响IE6；有几种方法可以区分开IE6：IE特有条件注释、CSS选择器、JavaScript，我们将逐一讨论。

使用IE特有条件注释

微软给IE添加了条件注释以区分不同版本，任何东西都可以塞进条件注释里：标签、JavaScript、js文件、css、内联样式。可以使用条件注释来针对某一个IE浏览器版本来编写代码。

规则如下：（译注：可参考IE特有注释(hack)）

这段文字会在所有浏览器显示
 

 
 
 

  
  
  
<!--[iflteIE6]> 
 
 
 

这段文字仅显示在IE6及IE6以下版本。 

 
 
 

  
  
  
ThismessagewillonlyappearinversionsofInternetExplorerlessthanorequaltoversion6.  
  
  
  
<![endif]--> 
  
  
  
<!--[ifgteIE6]> 
 
 
 

这段文字仅显示在IE6及IE6以上版本。 

 
 
 

  
  
  
ThismessagewillonlyappearinversionsofInternetExplorergreaterthanorequaltoversion6.  
  
  
  
<![endif]--> 
  
  
  
<!--[ifgtIE6]> 
 
 
 

这段文字仅显示在IE6以上版本（不包含IE6）。 

 
 
 

  
  
  
ThismessagewillonlyappearinversionsofInternetExplorergreaterthanversion6.  
  
  
  
<![endif]--> 
  
  
  
<!--[ifIE5.5]> 
 
 
 

这段文字仅显示在IE5.5。 

 
 
 

  
  
  
ThismessagewillonlyappearinInternetExplorer5.5.  
  
  
  
<![endif]--> 
  
  
  
<!--在IE6及IE6以下版本中加载css--> 
  
  
  
<!--[iflteIE6]> 
  
  
  
[*]  
  
  
  
<![endif]--> 
 
 
 

这段文字会在所有浏览器显示

使用条件注释加载css的好处是这些样式是独立于其他css文件的，因此不会在编写兼容代码时弄得一团糟；而且当IE6的市场份额降低到不需要兼容时，可以快速的清理掉。

使用条件注释的***缺点是在IE浏览器下会增加额外的HTTP请求数，所以需要权衡是否这样做。但我不建议使用条件注释加载外部js文件，因为js文件会造成阻滞，在js未加载完之前其余文件都不会被加载；对于js请使用JavaScript程序来区分浏览器而非条件注释。

使用CSS选择器区分开IE6

如果你不打算使用条件注释，CSS选择器是另外一个区分开IE6的办法，IE6兼容不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。

示例：

 
 
 

  
  
  
<styletypestyletype="text/css"> 
  
  
  
/*IE6专用*/  
  
  
  
.content{color:red;}  
  
  
  
/*其他浏览器*/  
  
  
  
div>p.content{color:blue;}  
  
  
  
</style> 
  
  
  
<div> 
  
  
  
<pclasspclass="header">SomeHeaderTextHere  
  
  
  
</div> 
 
 
 

这个方法的缺点是容易把样式表弄得一团糟，所以一定要写好注释说明。
在示例中，针对IE6写的样式在其他浏览器中也会执行，但(标准浏览器中)之后的子选择器覆盖了之前的申明，而IE6兼容不支持子选择器所以忽略了它。

使用JavaScript区分开IE6

如果你想要使用JavaScript区分开IE6，请看示例：

 
 
 

  
  
  
//原生JavaScript  
  
  
  
if(typeofdocument.body.style.maxHeight==="undefined"){  
  
  
  
alert('IE6Detected');  
  
  
  
}  
  
  
  
//MooTools（框架）  
  
  
  
if(Browser.Engine.trident4){  
  
  
  
alert('IE6Detected');  
  
  
  
}  
  
  
  
//jQuery（框架）  
  
  
  
if(($.browser.msie)&&($.browser.version=="6.0")){  
  
  
  
alert('IE6Detected');  
  
  
  
} 
 
 
 

译者来源：http://www.vfresh.org/w3c/727

【编辑推荐】

1. 解决IE6兼容性问题常见方法
2. 解决IE6兼容性问题的十大技巧
3. IE6 IE7 IE8 FF浏览器的CSS兼容问题探究
4. 微软发布升级版IE8Beta2浏览器 新特性敬请关注
5. 技术前沿 DIV+CSS布局网页对网站SEO的影响