IE的另类CSS hack，条件注释

IE的另类CSS hack，条件注释

常看见国外的一些css的下拉菜单的源码，因为IE7.0以下版本大多数标签不支持:hover的样式，所以比较多的使用条件注释。什么是浏览器的条件注释呢？

插入代码：

<!--[if IE]>
<h1>您正在使用IE浏览器</h1>
<![endif]-->

上面的代码就是条件注释，条件注释是在IE5.0/Win以后才被IE支持的，一般用于hack，如果你用的是IE浏览器，你就可以在页面里看到“您正在使用IE浏览器”，如果是IE以外的浏览器，就看不到这句话。为什么呢？

1. 条件注释的基本结构和HTML的注释(< !-- -- >)是一样的。因此 IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
2. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
3. 条件注释使用的是HTML的注释结构，因此他们 只能使用在HTML文件里，而不能在CSS文件中使用。

下面一段代码是测试在IE浏览器下的条件注释语句的效果

插入代码：

<!--[if IE]>
<h1>您正在使用IE浏览器</h1>
<![endif]-->
<!--[if IE 5]>
<h1>版本 5</h1>
<![endif]-->
<!--[if IE 5.0]>
<h1>版本 5.0</h1>
<![endif]-->
<!--[if IE 5.5]>
<h1>版本 5.5</h1>
<![endif]-->
<!--[if IE 6]>
<h1>版本 6</h1>
<![endif]-->
<!--[if IE 7]>
<h1>版本 7</h1>
<![endif]-->

如果你用的是IE 6，你会看到页面上显示“您正在使用IE浏览器”和“版本 6”。

同样的方法，我们还可以通过条件注释给页面链接一个附加的样式表文件。

插入代码：

<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="style_for_ie6.css" />
<![endif]-->

这样，如果你使用的是IE 6，你链接的样式表有2个，分别是style.css和针对IE 6的style_for_ie6.css，而其他的浏览器就只链接了style.css

当然还有内部样式

插入代码：

<!--[if IE]>
<style>
#top {margin-left: 20px;}
</style>
<![endif]-->

上面的语句也只有IE可以解释。

所以通过条件注释，我们可以方便的进行CSS Hack，因为条件判断不依赖于某个浏览器的hack，而是一个经过深思熟虑的特色功能，所以它是可以被放心地使用的。

posted on 2008-02-22 15:06 lovablebox 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lovablebox/archive/2008/02/22/1077700.html