CSS设置样式时区分不同版本IE的办法

!本文可能 超过1年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使用方面,本人不保证相应的兼容和可操作性。

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

1.条件注释

1
2
3
4
<!--[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中这样写:

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

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

2.CSS Hack

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

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

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

HackExampleIE6(S)IE6(Q)IE7(S)IE7(Q)IE8(S)IE8(Q)
**colorYesYesYesYesNoYes
++colorYesYesYesYesNoYes
-colorYesYesNoNoNoNo
__colorYesYesNoYesNoYes
##colorYesYesYesYesNoYes
\0color\0NoNoNoNoYesNo
\9color\9YesYesYesYesYesYes
!importantcolor:blue !important;
color:green;
NoNoYesNoYesNo

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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!》

若无特别说明,本网站文章均为原创,原则上这些文章不允许转载,但是如果阁下是出于研究学习目的可以转载到阁下的个人博客或者主页,转载遵循创作共同性“署名-非商业性使用-相同方式共享”原则,请转载时注明作者出处谢绝商业性、非署名、采集站、垃圾站或者纯粹为了流量的转载。谢谢合作!

请稍后...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*