条件注释——解决浏览器兼容性的利器

原文链接http://genghis-yang.tk/?p=65

对于网页编程我是个菜鸟，从开始做这个博客，就遇到一个又一个浏览器兼容性问题。IE和Firefox、Chrome之间，以及IE各不同版本之间对Html和CSS的解释不尽相同。之前我都尽量规避，放弃使用那些有不同解释的语句。可在上一篇博文中希望嵌入一个Flash时，这个问题便不得不直面。不过在稍加研究之后，我就找到了解决这一问题的绝佳方案——条件注释。

其实条件注释随处可见，就连我这个WordPress的模版中也是大量充斥着。它长得和HTML的注释语句十分相似（其实也可以把它看成注释），<!-- --> ，也正因为它使用了HTML的注释结构，所以它只能在HTML中出现而不能用在CSS文件中。它不是脚本，而是实实在在的HTML语句，直接在HTML代码里执行。下面让我们看看它的一些常用形式：

   1: <!--[if !IE]><!--> 此处代码除IE外都可识别 <!--<![endif]-->

   2: <!--[if IE]> 此处代码所有的IE可识别 <![endif]-->

   3: <!--[if IE 5.0]> 此处代码只有IE5.0可以识别 <![endif]-->

   4: <!--[if IE 5]> 此处代码仅IE5.0与IE5.5可以识别 <![endif]-->

   5: <!--[if gt IE 5.0]> 此处代码IE5.0以及IE5.0以上版本都可以识别 <![endif]-->

   6: <!--[if IE 6]> 此处代码仅IE6可识别 <![endif]-->

   7: <!--[if lt IE 6]> 此处代码IE6以及IE6以下版本可识别 <![endif]-->

   8: <!--[if gte IE 6]> 此处代码IE6以及IE6以上版本可识别 <![endif]-->

   9: <!--[if IE 7]> 此处代码仅IE7可识别 <![endif]-->

  10: <!--[if lt IE 7]> 此处代码IE7以及IE7以下版本可识别 <![endif]-->

  11: <!--[if gte IE 7]> 此处代码IE7以及IE7以上版本可识别 <![endif]-->

如果学习过一些编程基础，一看就明白了，这都是些判断语句。每一条语句都会执行判断，如果满足条件，其中包含的代码就会被执行；如果不满足，就会被当作注释直接忽略。举个例子：

<!--[if !IE]><!-->

<!-- 如果是Firefox浏览器,调用firefox.css样式表 -->

<link rel="stylesheet" type="text/css" href="firefox.css" />

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

<!--[if IE]>

<!-- 如果IE浏览器,调用ie.css样式表 -->

<link rel="stylesheet" type="text/css" href="ie.css" />

<![endif]-->

通过这两条判断就可以为IE和非IE载入两种不同的样式表文件，进而形成两个完全相同或完全不同的界面。利用它不仅可以解决兼容性问题，也可以对不同的浏览器行为做更细致的控制。

本片博文参考了百度空间中bj1686的博文《<!--[if IE]>….<![endif]--> (<!--[if !IE]>||<![endif]-->)》，在此向作者表示感谢！