网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法

写在前面

由于万恶的IE(尤其指IE6和IE7),我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器[1]中可实现的效果在IE里却有各种离奇问题,例如IE6、IE7不能良好应对的inline-block和.clearfix问题,好在大部分问题已经有了足够的总结和途径。废话不多说,下面是一些方法区分浏览器的方法和我的看法。

主要途径

CSS Hack

直接在CSS文件中写CSS Hack是非常直观的区分方法。区分不同IE版本的hack代码为

#content{
	background:red; /* 所有浏览器 */
	background:orange\9; /* 所有IE浏览器 */
	*background:yellow; /* IE7和IE6 */
	+background:green; /* IE7 */
	_background:blue; /* IE6 */
}

还有一些hack不太实用,就不一一列举了。
CSS Hack的缺点是CSS文件无法通过W3C验证,代码阅读时会很奇怪。

条件注释CSS文件

条件注释是写在html里的只会被IE识别的代码,一般在<head>区域通过不同的条件注释导入不同的CSS,不同的IE浏览器会引用不同的CSS。下面的4段注释依次表示"在IE下使用"、“低于IE8时使用”、“IE7时使用”、“IE6时使用”:

<!--[if IE]>
<link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" />
<![endif]--> 
<!--[if lt IE 8]>
<link rel="stylesheet" href="/ie.css" type="text/css" media="screen" />
<![endif]--> 
<!--[if IE 7]>
<link rel="stylesheet" href="/ie7.css" type="text/css" media="screen" />
<![endif]--> 
<!--[if IE 6]>
<link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" />
<![endif]--> 

由于IE8下CSS问题较少,一般只需要为IE6、7写一点修正代码。如果需要,可以在ie.css里用CSS Hack对IE6/7进行差异处理。

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

条件注释CSS文件的缺点是会增加至少1次http请求,影响渲染速度,而且维护时不够方便。

条件注释<html>

条件注释<html>跟上面的方法原理一样,只不过这里是给<html>注释不同的class。

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

这样在CSS中使用下面的代码即可区分版本

#content{background:red;}
.ie9 #content{background:orange;}
.ie8 #content{background:yellow;}
.ie7 #content{background:green;}
.ie6 #content{background:blue;}

你也可以增加诸如.ltie8这样的class来实现更方便的版本分组管理。这个方法不会增加http请求,而且不需要任何hack。

最佳方法

毫无疑问,最好的办法就是用条件注释<html>为CSS提供区分。所有CSS文件可以合并在一起,ie的fix代码与正常规则临近,便于维护,而且没有hack可以让代码符合标准(使用zoom、私有CSS3属性依旧无法通过验证T_T)。

标准浏览器[1]:本文指Chrome、Safari、Firefox及Opera等支持CSS标准属性的浏览器。


文章中性感的火狐壁纸来自wallpapers-diq.com

此条目发表在 前端开发 分类目录,贴了 , , 标签。将固定链接加入收藏夹。

网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法》有 9 条评论

  1. Dianso 说:

    条件注释CSS文件,这个比较常见

  2. Pingback 引用通告: 网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法 - IE浏览器中文网站

  3. ForRSS 说:

    最烦的就是ie6。

  4. Louis Han 说:

    为了个破IE容易吗

  5. 嘉兴网站设计 说:

    这个博客好酷啊 顶

  6. 芒果 说:

    哈哈,图很杀哦

  7. Pingback 引用通告: Web page in distinguishing IE6 and IE7 reconstruction, IE8 and standard browser best method

  8. Ethan 说:

    very cool!!

  9. Pingback 引用通告: 网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法 - 智慧,启迪人生