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

开发 前端
本文向大家介绍一下单独对IE6兼容进行处理的方法,IE6兼容的第一步就是单独对IE进行兼容,你针对IE6所写的代码只影响IE6;有几种方法可以区分开IE6,这里向你一一介绍。

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

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

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

使用IE特有条件注释

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

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

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

  1. <!--[iflteIE6]> 

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

  1. ThismessagewillonlyappearinversionsofInternetExplorerlessthanorequaltoversion6.  
  2. <![endif]--> 
  3. <!--[ifgteIE6]> 

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

  1. ThismessagewillonlyappearinversionsofInternetExplorergreaterthanorequaltoversion6.  
  2. <![endif]--> 
  3. <!--[ifgtIE6]> 

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

  1. ThismessagewillonlyappearinversionsofInternetExplorergreaterthanversion6.  
  2. <![endif]--> 
  3. <!--[ifIE5.5]> 

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

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

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

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

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

使用CSS选择器区分开IE6

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

示例:

  1. <styletypestyletype="text/css"> 
  2. /*IE6专用*/  
  3. .content{color:red;}  
  4. /*其他浏览器*/  
  5. div>p.content{color:blue;}  
  6. </style> 
  7. <div> 
  8. <pclasspclass="header">SomeHeaderTextHere  
  9. </div> 

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

使用JavaScript区分开IE6

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

  1. //原生JavaScript  
  2. if(typeofdocument.body.style.maxHeight==="undefined"){  
  3. alert('IE6Detected');  
  4. }  
  5. //MooTools(框架)  
  6. if(Browser.Engine.trident4){  
  7. alert('IE6Detected');  
  8. }  
  9. //jQuery(框架)  
  10. if(($.browser.msie)&&($.browser.version=="6.0")){  
  11. alert('IE6Detected');  

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

【编辑推荐】

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

2010-08-18 13:54:35

IE6IE7Firefox兼容

2010-08-17 16:18:23

IE6IE7FF

2010-08-20 12:45:41

IE6IE7Firefox

2010-08-27 15:38:21

兼容IE6IE7

2010-09-06 15:06:29

IE6IE7Firefox

2010-08-18 15:22:28

IE6IE7Firefox

2010-08-18 15:57:14

IE6IE7IE8

2010-08-18 09:24:09

IE6兼容性

2010-08-18 16:18:59

IE6CSS

2010-08-18 13:45:07

IE6IE7FF

2010-08-18 10:24:51

IE6IE7IE8

2010-09-15 10:57:25

IE6IE7FF

2010-08-20 13:15:54

IE6IE7IE8

2010-09-16 13:17:31

IE6IE7IE8

2010-08-20 09:33:22

IE6IE7IE8

2010-08-24 09:46:57

IE6IE7FF火狐

2010-08-20 09:39:43

IE6IE7Firefox

2010-08-27 15:08:10

FirefoxIE6IE7

2010-08-18 10:37:16

IE6IE7IE8

2010-09-15 11:08:48

CSSIE6IE7
点赞
收藏

51CTO技术栈公众号