使用条件注释

作者:vkvi 来源:千一网络(原创) 日期:2007-2-2

在 IE5.0 及以上版本中支持条件注释,也就是说 IE 会解释这种特定的注释,但其它浏览器则会隐藏这些注释。这在编写兼容浏览器的代码时非常有用。虽然目前只有 IE5.0 及以上版本中支持条件注释,但是它的功能却是用来兼容其它的浏览器。

如果您想非常详细地了解条件注释,请参见微软的 MSDN:About Conditional Comments(可能是英文站点),下面我们对条件注释作个系统的介绍。

语法:

注释类型 语法或可能的值
标准 HTML 注释 <!--Comment content -->
downlevel-hidden <!--[if expression]> HTML <![endif]-->
downlevel-revealed <![if expression]> HTML <![endif]>

请注意:

是 <!--[if expression]> 不是 <!--[if expression]-->

是 <![if expression]> 不是 <!--[if expression]-->

解释:

downlevel-hidden:

<!--[if expression]> HTML <![endif]-->

由于整个语句包含在 <!-- --> 中,所以在 IE 以外的浏览器中,会将其当作注释,而在 IE 中,由于支持这种语法,所以会根据特定的结构来执行不同的语句。

有过程序基础的,都会了解,如果 expression 为 true,则显示 HTML。

downlevel-revealed:

<![if expression]> HTML <![endif]>

由于这里没有注释符,所以在 IE 以外的浏览器中会显示 HTML,而 IE 中,则视条件决定显示否。

expression

那么 expression 可以是什么呢?

  • 字符串-IE 用以表示 IE 浏览器。
  • 数字 用以表示版本。
  • ! 操作符,表示否。
  • feature 比较操作符,如果特性符合浏览器类型返回 true。
  • feature version 比较操作符,如果特性符合浏览器类型及版本返回 true。
    lt 比较操作符,表示小于。
  • lte 比较操作符,表示小于或等于。
  • gt 比较操作符,表示大于。
  • gte 比较操作符,表示大于或等于。

应用示例

<!--[if gte IE 6]>
<p>你使用的是 IE6 或更高版本的 IE 浏览器。</p>
<![endif]-->

<!--[if lt IE 6]>
<p>你使用的是 IE6 以下的浏览器。</p>
<![endif]-->

<![if !IE]>
<p>你使用的不是 IE 浏览器。</p>
<![endif]>

怎么样?比 JS 判断简单吧?再看一个例子。

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="iestyles.css" />
<![endif]-->

如果是 IE 浏览器(不论版本),就引用 iestyles.css 这个样式表文件。

相关文章