IE 条件注释


本文只适用于IE10之前的浏览器。自IE 10开始,微软已经停止支持条件注释。Conditional comments are no longer supported


相信大部分从事网站开发的童鞋都用到过如下所示的IE的条件注释,但是你是否真得清楚怎么去用呢?

    <!--[if lt IE 9]>
        <script src="~/scripts/less-than-ie9.js"></script>
    <![endif]-->


微软当时提供这个功能,主要是为了让网站开发人员能根据不同的IE版本执行不同的代码,从而提高网站的可用性。比如IE8支持 display: inline-block,但是IE6~7并不支持。那就需要区分对待,而不能只用一句 display:inline-block 来希望所有浏览器都能和谐共处。


基本语法

因为这并不是标准化的方法,只是是微软自家的东西,所以为了不让自家的这个功能影响到其它浏览器,特地设计成与HTML注释(<!-- 我是注释 -->)类似的语法。我把文章最开头的代码重新写一下,你就会一目了然了。

<!--[if lt ie 9]><script src="~/scripts/less-than-ie9.js"></script><![endif] -->

是不是看出些什么味道了? 那中间灰色的部分对于其它浏览器来说那就只是个注释,并不会采取任何行动,这样就避免了可能的干扰。


1.1 基本的语法结构:


类 型语 法描 述
向下隐藏

<!--[if expression]>

      HTML

 <![endif]-->

对于不兼容的浏览器,HTML代码被解释成注释内容而抛弃
向下显示

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

      HTML 

<!--<![endif]-->

对于不兼容的浏览器,HTML正常显示


注意:<!--[if  这几个字符之间不能出现空格,否则不能发挥功能。大小写不敏感。


1.2 主要关键字


关键字描 述
[ ]所有条件语句放在 [ ] 中,如 [if IE],[if !IE]
if,endif条件判断的开始和结束
IE暗示这语句只对IE有效
版本整数或者浮点数。如[if IE 8]



1.3 运算符(和其它编程语言中的类似):


运算符描 述
非运算
ltless than缩写,小于
lteless than 或 equal,小于等于
gtgreater than,大于
gtegreater than 或 equal,大于等于
&并且
|
()子表达式


举例:

<!--[if IE 8]> 
<p>IE8</p> 
<![endif]-->

<!--[if !IE 8]> 
<p>除了IE 8</p> 
<![endif]-->

<!--[if lt IE 8]> 
<p>比IE8版本低的浏览器</p> 
<![endif]-->

<!--[if gt IE 8]> 
<p>比IE8版本高的浏览器</p> 
<![endif]-->

<!--[if (gte IE 6)&(lt IE 8)]>
<p>IE6,IE7</p>
<![endif]-->


两类表达式

在上一节语法中,已经介绍过“向下隐藏”和 “向下显示”这两类表达式语法。


向下隐藏,就是指对于不兼容(条件注释)的浏览器直接隐藏。这个很好理解,因为该代码对于那些浏览器而言,本身就是注释。我们上面举的例子都为“向下隐藏”的例子。

向下显示,意思是对于不兼容的浏览器显示其中的HTML代码。如果不好理解的话,我来举个例子。

我们都知道JQuery自从2.0开始就放弃了对IE9以下浏览器的支持,例子想实现的效果是低于IE 9的浏览器加载 jquery 1.9,其它浏览器加载 jquery 2.0。

 <!-- 下面这段是 向下隐藏 语法-->
 <!--[if lt IE 9]>
     <script src="~/Scripts/jquery-1.9.1.min.js"></script>    
 <![endif]-->
 

  <!-- 下面这段是 向下显示 语法--> 
 <!--[if gte IE 9]><!-->    
     <script src="~/Scripts/jquery-2.0.0.min.js"></script>    
 <!--<![endif]-->



为什么向下显示语法这么奇怪?


第一次看到这样的语法,想不混乱恐怕都比较困难。但是当你了解了这段代码之所以这样的原因后,看起来就会顺眼很多。

其实,最初微软提出的向下显示语法并非如此,但是由于微软的语法不符合标准(x)HTML的语法规范,所以很多浏览器开发人员对代码进行了调整。

<!--微软的语法,不符合(x)HTML中的注释语法规范-->
<![if expression]> HTML <![endif]>

<!--第一次调整,让 if 和 endif 所在行变成合法的注释语句-->
<!--[if expression]>-->
HTML
<!--<![endif]-->


第一次调整后,基本正常,但是对于符合条件分支的IE浏览器在输出HTML代码的时候多出了“-->”字符。

因为在那些浏览器看来上述代码就如同:<!--[if expression]> --> HTML <!--<![endif]-->,除去灰色部分后,就和向上隐藏的语法极其相似,而endif语句前多余的“<!--”则恰好和结尾的“-->”进行匹配,使浏览器认为是一条注释语句。


为了解决这个问题,在 “--> ”前又增加了“<!”来组合成一个空注释语句。这样当条件判断成立的时候,实际上是执行到了空注释,这样也就不会影响HTML的输出。而对于其它非IE浏览器,if 和 endif 本身就是注释,所以直接忽略。


参考资料

1.  About conditional comments

2. 条件注释

文章索引

[隐 藏]

本站采用知识共享署名 3.0 中国大陆许可协议进行许可。 ©2014 Charley Box | 关于本站 | 浙ICP备13014059号