CSS设置样式时区分不同版本IE的办法
提醒:本页面将不再更新、维护或者支持,文章、评论所叙述内容存在时效性,涉及技术细节或者软件使用方面不保证能够完全有效可操作,请谨慎参考!
刚才看到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!》 。
\9 我用的多一些
@威言威语 我觉得以后的设计还是用第三种方法好些,关键是省事
哥讨厌网页上出现那么的if语句,哥有代码洁癖!
@威言威语 不过我觉得在CSS里Hack,费力也不符合CSS标准。
现在CSS的标准还是2.1的,已经过时了,能有几个去看CSS2.1的标准的,现在已经CSS3了
@威言威语 但是那些CSS Hack也不符合CSS3标准啊
[...]这里的addDOMLoadEvent可以参考《使用DOMContentLoaded取代部分window.onload》,关于if lt IE 9条件注释可以参考《CSS设置样式时区分不同版本IE的办法》。这样这段脚本就专门针对IE9及以下浏览器的class为hidefocus设置.hideFocus = true的属性,然后配合CSS的outline:none,基本就完美了。[...]
[...] CSS设置样式时区分不同版本IE的办法 | 王晔的流水账. [...]
[...] 回复: 难道是非标准的Quriks模式,前段时间我总结了篇区分IE的Hack,给楼主参考下吧http://wangye.org/blog/archives/56/ [...]
[...] CSS设置样式时区分不同版本IE的办法 [...]