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

我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码，表示的是限定某些浏览器版本才能执行的语句，那么这些判断语句的规则是什么呢？这里做一下记录，便于后期查询使用。

<!--[if IE]>只有IE6,7,8,9浏览器显示(IE10+标准模式不支持)<![endif]--> 
<!--[if !IE]>只有非IE浏览器显示(不包括IE10+)<![endif]--> 
<!--[if IE 9]>IE9浏览器显示<![endif]--> 
<!--[if IE 8]>IE8浏览器显示<![endif]--> 
<!--[if IE 7]>IE7浏览器显示<![endif]--> 
<!--[if IE 6]>IE6浏览器显示<![endif]--> 
<!--[if lt IE 10]>IE10以下版本浏览器显示(不包括IE10)<![endif]--> 
<!--[if lte IE 9]>IE9及IE9以下版本浏览器显示(包括IE9)<![endif]--> 
<!--[if gt IE 6]>IE6以上版本浏览器显示(不含IE6)<![endif]--> 
<!--[if gte IE 7]>IE7及IE7以上版本浏览器显示(包含IE7)<![endif]--> 

那么我们应该如何应用条件注释呢？

因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样，具体就是对CSS的解释不同，我们为了兼容这些，可运用条件注释来各自定义，最终达到兼容的目的。比如：

<!-- 默认先调用css.css样式表 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!-- 如果IE浏览器版是7,调用ie7.css样式表 -->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->
<!-- 如果IE浏览器版本小于等于6,调用ie6.css样式表 -->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->

这其中就区分了IE7和IE6向下的浏览器对CSS的执行，达到兼容的目的。同时，首行默认的css.css还能与其他非IE浏览器实现兼容。

注意：默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。

有人会试图使用来定义非IE浏览器下的状况，但注意：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。

正常就是默认的样式，对IE浏览器需要特殊处理的，才进行条件注释。在HTML文件里，而不能在CSS文件中使用。