关于IE条件注释

本文翻译自此篇文章。翻译纯属业余。

许多网站为了确保他们的站点能够在不同的浏览器上有不同的显示效果而使用特征检测,一些传统的网站使用其他技术,诸如在服务器或客户端上使用脚本去检测浏览器类型。在这里我们引入比使用脚本检测浏览器更有优势的方法--条件注释。条件注释可以轻易地更早发现早期的IE版本。条件注释是层叠样式表(CSS)用于区分IE特定版本的首选方式。

重要提示 自IE10起,标准模式不再支持条件注释。而是采用特征检测给浏览器不支持的功能来提供备用策略。有关标准模式的详细信息,请参阅定义文档兼容性。

下面是本文要讨论的主题:

术语

熟悉下列术语有助于你学习文档兼容性。 


名词

描述
expression 由运算符、特征和(或)值组合形成一个条件语句
downlevel browser 任何浏览器除了IE5+,其他低版本浏览器不支持条件注释
uplevel browser IE5+支持条件注释
downlevel-hidden 低版本浏览器会忽视条件注释。如果表达式为true时,IE5+会渲染HTML页面
downlevel-revealed 低版本浏览器经过条件注释的解析。如果表达式为true时,IE5+会渲染HTML页面

使用条件注释的好处

下列表格中展示了基本语法类型,第一个注释是最基本的HTML注释。表格比较并展示每一种条件注释的不同语法的用法。

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

expression是由功能、操作符和值组成的。下表列出了支持的功能,并介绍了每个功能支持的值。

  

Item Example 注释
IE [if IE] 对应IE的版本功能来查看该网页
value [if IE 7] 一个整数或浮点标号对应于浏览器的版本。如果是与版本号匹配的浏览器版本,则返回true。
WindowsEdition [if WindowsEdition] Windows 7的IE8。  "WindowsEdition"对应Windows的版本功能。
value [if WindowsEdition 1] 整数对应Windows版本。如果正在使用的的值相匹配,则返回true。
true [if true] 结果始终为true.
false [if false] 结果始终为false.

下表描述了可用于创建条件表达式的运算符。

Item Example 注释
! [if !IE] NOT运算符.。被放置在要素、运算符或表达式之前,扭转表达式的布尔含义。
lt [if lt IE 5.5] 小于运算符。如果第一个参数小于第二个参数,返回true。
lte [if lte IE 6] 小于或等于运算符。如果第一个参数小于或等于第二个参数,返回true。
gt [if gt IE 5] 大于运算符。如果第一个参数大于第二个参数,返回true。
gte [if gte IE 7] 大于或等于运算符。如果第一个参数大于或等于第二个参数,返回true。
( ) [if !(IE 7)] 子表达式运算符。配合使用布尔运算符来创建更复杂的表达式。
& [if (gt IE 5)&(lt IE 7)] AND运算符。如果所有的子表达式的值为真,返回true。
| [if (IE 6)|(IE 7)] OR运算符。如果任何一个子表达式的计算结果为true,返回true。

Downlevel-hidden条件注释

此示例显示了一个低版本隐藏的条件注释,其中包含文本。

1 <!--[if IE 8]>
2 <p>Welcome to Internet Explorer 8.</p>
3 <![endif]-->

Downlevel-hidden条件注释类似于基本的HTML注释,包含连字符(“ - ”)在开启和关闭标签。条件显示在标签的开口部,和[ENDIF]被放置在标签的封闭部分之前。内容放在注释标签内。

因为前四个字符和注释的最后三个字符是相同的HTML注释元素,所以低版本浏览器会忽略注释块内的HTML内容。由于内容被有效地不支持条件注释的浏览器隐藏,这种类型的条件注释被称为低版本隐藏。

如果条件表达式的结果为真,则对注释块里面的内容进行分析,并通过Internet Explorer 5及更高版本的渲染。针对Internet Explorer而专门设计的内容,这种做法特别有效。

下一个示例演示了如何在客户端脚本块放置一个条件注释;在这种情况下,消息在IE5+浏览器如何显示的。

1 <!--[if gte IE 7]>
2 <script>
3   alert("Congratulations! You are running Internet Explorer 7 or a later version of Internet Explorer.");
4 </script>
5 <p>Thank you for closing the message box.</p>
6 <![endif]--> 

在上面的例子中,浏览器的版本只有主要的数字进行比较,因为它是在条件表达式指定的唯一数字。要比较这两个主要和次要版本号,要同时指定数字。

ownlevel-revealed条件注释

ownlevel-revealed条件注释允许在不承认条件注释的浏览器上包含内容。尽管条件注释被忽略,但它包含的HTML内容却没有被忽略。如果条件为true,IE5+仍然解析和渲染内容。ownlevel-revealed条件注释和Downlevel-hidden条件注释是互补的。

下面片段展示了一个典型的低版本条件注释:

1 <![if lt IE 8]>
2 <p>Please upgrade to Internet Explorer version 8.</p>
3 <![endif]>

当比较这种类型HTML注释时,发现在注释块在"<!"和 ">"之后(前)没有连字符("--") ,因此,注释分隔符被视为无法识别的HTML。因为浏览器不能识别Downlevel-hidden条件注释,那么它就什么都不做了。

版本号

条件表达式可以用来确定查看网页浏览器的版本或Windows上用于运行浏览器的版本。在这两种情况下,表达式的值称为版本号,必须正确地指定,以获得所需的结果。

检测浏览器的版本时,主要的浏览器版本被指定为整数。要检查是否有轻微的浏览器版本,版本号遵循由一个小数点和四位数组成的规则。例如,微软的Internet Explorer5.5的发布版本的版本载体是5.5000。

在下面的例子中,仅主要版本号被指定。

1 <!--[if IE 5]>
2 <p>Welcome to any incremental version of Internet Explorer 5!</p>
3 <![endif]-->

下面的测试正确地识别Internet Explorer 5。

1 <!--[if IE 5.0000]>
2 <p>Welcome to Internet Explorer 5.0!</p>
3 <![endif]-->

例子 

 1 <!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
 2 <![if !IE]><p>You are not using Internet Explorer.</p><![endif]>
 3
 4 <!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
 5 <!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->
 6
 7 <!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
 8 <!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
 9 <!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
10 <!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->
11
12 <!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
13 <![if false]>You are using a <em>downlevel</em> browser.<![endif]>
14
15 <!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->
时间: 2024-11-02 22:11:33

关于IE条件注释的相关文章

IE条件注释

条件注释是IE专门提供的一种语法,其他浏览器会将其作为注释而忽略这些语句. 作用:根据不同的IE版本加载对应的CSS或者JS文件,甚至css代码和html代码. 重要提示 自IE10起,标准模式不再支持条件注释.而是采用特征检测给浏览器不支持的功能来提供备用策略.有关标准模式的详细信息,请参阅定义文档兼容性. 术语 熟悉下列术语有助于你学习文档兼容性. 名词 描述 expression 由运算符.特征和(或)值组合形成一个条件语句 downlevel browser 任何浏览器除了IE5+,其他

html条件注释

HTML条件注释用法诠释 注释内容以样式为例,如下: 1.支持所有IE浏览器 <!--[if IE]> <link rel="stylesheet" href="all-ie-only.css" type="text/css"/> <![endif]--> 2.支持非IE浏览器 <!--[if !IE]> <link rel="stylesheet" href="

CSS条件注释

由于浏览器版本的不同,对CSS里某些元素的解释也不一样,针对浏览器版本不同而选择不同CSS的代码,其实我们还可以利用条件注释的方法来达到类似的目的,什么是条件注释,在此简单介绍一下,无非就是一些if判断啦,呵呵,但这些判断不是在脚本里执行的,而是直接在html代码里执行的,下面来介绍一下使用方法吧. <!--[if XXX]>这里是正常的html代码<![endif]–>这里XXX是一些特定的东东,在此列表几个出来,详细介绍各自的含义:<!–[if IE]> / 如果浏

用条件注释判断浏览器版本解决页面兼容问题

在IE8.IE9上可能好好的,当我们在IE6.IE7或者是其他的浏览器上再浏览这些页面时,可能会发现我们的页面已经面目全非了,那么如何解决兼容问题呢,本文就为大家一一道来对于浏览器兼容问题,我们应该碰到很多了,在平时写一些页面时,在IE8.IE9上可能好好的,当我们在IE6.IE7或者是其他的浏览器上再浏览这些页面时,可能会发现我们的页面已经面目全非了,作为一名前端开发人员,这是最让人发疯的问题了,那么我们该怎么解决这些问题呢? 首先,我们写的页面在不同的浏览器上之所以会出现表现不同的问题,是因

IE浏览器条件注释if IE详解

无论是google还是百度搜到的if IE条件注释用法,排在前面的几个搜索结果文章都是有错误和漏洞的,而这些漏洞和错误导致我一度误以为有些IE条件注释已经失效了,即使不是失效,也令我 很费解.今天抽时间查阅了些老外写的东西,并且都试验了一遍.发现给我造成费解的原因是那些文章大多都是抄来的,没有经过亲自试验,在复制来复制去的过程 中就把某些关键的地方弄错了:( 现将正确的if IE条件注释用法总结一下,以便以后使用: 运算符 示例 说明 ! [if !IE] 非运算符.该例子表示所有的非IE浏览器

IE里的条件注释

<!--[if IE 6]> <script src="excanvas.js" type="text/javascript" charset="utf-8"></script> //引入IE 图像类库 <![endif]--> <!--[if IE 6]> 内容 <![endif]--> <!--[if !IE]><--> 内容 <!-->

用条件注释判断浏览器版本,解决兼容问题

对于浏览器兼容问题,我们应该碰到很多了,在平时写一些页面时,在IE8.IE9上可能好好的,当我们在IE6.IE7或者是其他的浏览器上再浏览这些页面时,可能会发现我们的页面已经面目全非了,作为一名前端开发人员,这是最让人发疯的问题了,那么我们该怎么解决这些问题呢? 首先,我们写的页面在不同的浏览器上之所以会出现表现不同的问题,是因为不同的浏览器在解析页面时,他们所遵循的规则并不是完全相同的.比如IE,不同的版本解析都不同,何况是不同的浏览器厂商,不同的内核呢.但是我们在遇到兼容性问题时,应该首先检

使用html进行浏览器判断,浏览器条件注释

下面来点今天写东西的时候查资料,收集的关于使用html进行浏览器判断的一些资料: 条件注释的基本格式: <!--[if expression]>注释内容<![endif]--> 或者 <![if expression]>注释内容<![endif]> 基本上所有的条件注释就根据上面的内容而来 expression的常用值: IE ie浏览器 IE version 版本为version的ie浏览器 lt IE version 版本号小于version lte I

HTML if条件注释

if IE条件注释起着非常大的作用! if IE什么意思呢?下面就列举了一些在CSS常见的HACK控制语句. 作为IE的IF条件注释使用备忘,有些时候试用if IE而不是在css中使用hack. 在HTML中使用条件if注释,让客户端的不同版本IE浏览器读取各自版本浏览器注释里内容. <!--[if !IE]>除IE外都可识别<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if gt IE 5.

CSS布局参考 IE的If条件注释使用备忘

内容提要:在CSS布局中,还常常用到IE Hack.if IE起着非常大的作用! 关键字:Div CSS IE Hack if IE什么意思呢?下面就列举了一些在CSS常见的HACK控制语句. 作为IE的IF条件注释使用备忘,大家可以参考,有经验欢迎与网友分享. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if