什么是IE条件注释：
IE条件注释（Conditional comments）是IE浏览器私有的代码，是一个类似IF判断的语法注释块，IE5之上支持。
例如下面：
01 | <!--[if IE]> |
02 | 您使用的是IE浏览器<br /> |
03 | <![endif]--> |
04 | <!--[if IE 6]> |
05 | 您使用的浏览器是 IE 6<br /> |
06 | <![endif]--> |
07 | <!--[if IE 7]> |
08 | 您使用的浏览器是 IE 7<br /> |
09 | <![endif]--> |
10 | <!--[if IE 8]> |
11 | 您使用的浏览器是 IE 8<br /> |
12 | <![endif]--> |
13 | <!--[if IE 9]> |
14 | 您使用的浏览器是 IE 9<br /> |
15 | <![endif]--> |
16 | <!--[if gte IE 8]> |
17 | 您使用的浏览器是 IE 8 或更高版本<br /> |
18 | <![endif]--> |
19 | <!--[if lt IE 9]> |
20 | 您使用的浏览器是 IE 9 以下版本<br /> |
21 | <![endif]--> |
22 | <!--[if lte IE 7]> |
23 | 您使用的是 IE 7 或更低版本<br /> |
24 | <![endif]--> |
25 | <!--[if gt IE 6]> |
26 | 您使用的是 IE6 或更高版本<br /> |
27 | <![endif]--> |
28 | <!--[if !IE]> --> |
29 | 您使用的不是IE浏览器<br /> |
30 | <!-- <![endif]--> |
语法详解：
以<!-- [if 条件(conditional)]> -->开始<!-- <![endif]-->结束。条件和JS中的if很类似，布尔值类型，可以把浏览器特性作为条件，比如IE ，IE 6， IE 7 ，此外还支持 非(!) 、与(&) 、或(|)、 括号、 大于(gt)、 大于等于(gte)、 小于(le) 、 小于等于(lte)。
CSS方面的使用：
1 | <!--[if IE 8]> |
2 | <link href="ie8.css" rel="stylesheet" type="text/css" media="screen" /> |
3 | <![endif]--> |
4 | <!--[if IE 7]> |
5 | <link href="ie7.css" rel="stylesheet" type="text/css" media="screen" /> |
6 | <![endif]--> |
7 | <!--[if lt IE 7]> |
8 | <link href="ie7lt.css" rel="stylesheet" type="text/css" media="screen" /> |
9 | <![endif]--> |
既可以解决浏览器差异，还可以保证CSS的标准化，避免了很多私有CSS属性作为hack的方式。但是这样会增加过多的文件加载，维护成本增加。
解决方法：
1 | <!--[if lt IE 7]><html class="ie6 oldie" lang="zh"><![endif]--> |
2 | <!--[if IE 7]><html class="ie7 oldie" lang="zh"><![endif]--> |
3 | <!--[if IE 8]><html class="ie8 oldie" lang="zh"><![endif]--> |
4 | <!--[if gt IE 8]><!--> <html lang="zh"> <!--<![endif]--> |
IE条件注释在js方面的使用：
01 | <!--[if lte IE 8]> |
02 | <script> |
03 | (function(){ |
04 | var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure, |
05 | footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','), |
06 | i= e.length; |
07 | while(i--){ |
08 | document.createElement(e[i]); |
09 | } |
10 | })(); |
11 | </script> |
12 | <![endif]--> |
再比如：IE6的背景图片缓存问题
1 | <!--[if IE 6]> |
2 | <script> |
3 | document.execCommand("BackgroundImageCache", false, true); |
4 | </script> |
5 | <![endif]--> |
甚至还可以帮助JS直接获取浏览器信息，大多数库和方案识别浏览器都是通过userAgent串处理的，而且大部分的应用场景也是if （IExx） {doxx}
1 | function isIE(v){ |
2 | var v = v || "", |
3 | tester = document.createElement('div'); |
4 | tester.innerHTML = '<!--[if IE ' + v + ']><i></i><![endif]-->'; |
5 | return !!tester.getElementsByTagName('i')[0]; |
6 | } |
HTML友情提醒：
1 | <!--[if lte IE 8]> |
2 | <p>亲爱的用户，您的浏览器版本过低，建议您升级浏览器获得更好的体验....</p> |
3 | <![endif]--> |
