本文只适用于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 运算符(和其它编程语言中的类似):
运算符 | 描 述 |
! | 非运算 |
lt | less than缩写,小于 |
lte | less than 或 equal,小于等于 |
gt | greater than,大于 |
gte | greater 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 本身就是注释,所以直接忽略。
参考资料
2. 条件注释