提醒:本页面将不再更新、维护或者支持,文章、评论所叙述内容存在时效性,涉及技术细节或者软件使用方面不保证能够完全有效可操作,请谨慎参考!

刚才看到Web Designer Wall的这篇文章 《CSS Specific for Internet Explorer》 感觉蛮实用的,介绍了3种为不同版本IE设置样式的办法,在这里我总结下:

1.条件注释

<!--[if lt IE 7]>版本小于IE7将看到这行<![endif]-->
<!--[if lte IE 7]>版本小于或等于IE7将看到这行<![endif]-->
<!--[if IE 7]>版本如果是IE7将看到这行<![endif]-->
<!--[if gt IE 7]>版本大于IE7将看到这行<![endif]-->

很明显具体格式是if 运算符 IE 版本号,运算符如果省略将意味着等于,否则请取lt(小于)、gt(大于)、lte(小于或等于)、gte(大于或等于),另外还可以进行感叹号(!)逻辑取非和 | 逻辑或等运算,这个将在第三种方法介绍中给出实例。 具体使用在html中这样写:

<!--[if IE 6]>
<style type="text/css">
 /* 针对IE6定义的样式 */
</style>
<![endif]-->

当然除了定义style样式外我们还可以针对不同IE浏览器定义不同的内容,可以是script脚本或者其他显示或隐藏的内容等。

2.CSS Hack

这种方法可能大家已经很熟悉了,具体如下:

.box {	
    background: gray; /* 基本的 */
    background: pink\9; /* IE 8 及低于IE8版本 */
    *background: green; /* IE 7 及低于IE7版本 */
    _background: blue; /* IE 6 */
}

另外网上找到的下面这张表可以很清楚的像大家展示IE各版本的css hack。

Hack Example IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q)
* *color Yes Yes Yes Yes No Yes
+ +color Yes Yes Yes Yes No Yes
- -color Yes Yes No No No No
_ _color Yes Yes No Yes No Yes
# #color Yes Yes Yes Yes No Yes
\0 color\0 No No No No Yes No
\9 color\9 Yes Yes Yes Yes Yes Yes
!important color:blue !important;
color:green;
No No Yes No Yes No

这里S代表standard标准模式,Q代表Quirks怪异模式 更详细的可以看 牛人总结的兼容一览表

3.根据条件注释为html设置不同的class

这个方法也是我最近研究HTML5时遇到的,特别是这里的一份 HTML5开发模板 ,具体做法如下:

<!DOCTYPE html>
<!--[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> <!--<![endif]-->
<head>
<style type="text/css">
.box {
	color: #fff;
	padding: 5px 20px;
	background: gray; 
}
.ie8 .box {
	background: pink;
}
.ie7 .box {
	background: green;
}
.ie6 .box {
	background: blue;
}
</style>
</head>
<body>
<div class="box">
Content here
</div>
</body>
</html>

可以看到这里巧妙的用到了第一种条件注释的方法,其中if (gt IE 9)|!(IE)就是在第一种方法中谈到的逻辑或和非的一个实例,意思就是,如果IE版本大于9或者非IE则if成立。

总结一下,说到底还是第三种方法个人感觉比较好,而且也是符合标准能够通过验证(HTML+CSS)的办法之一。具体这个办法的详细介绍可以参考Paul Irish的 《Conditional stylesheets vs CSS hacks? Answer: Neither!》