IE条件注释可以怎么玩
IE条件注释可以怎么玩
如果玩过条件注释的，可以忽略以下基础介绍。
IE条件注释（Conditional comments）是IE浏览器私有的代码，是一个类似IF判断的语法注释块，IE5之上支持。
代码看起来是这样的
!--[if IE 6]>
你正在使用IE6
![endif]-->复制代码
他的语法是一个普通的HTML注释 !�C comments �C>，分支块以 [if 条件(conditional)]> 开始 ![endif]结束。条件和JS中的if很类似，布尔值类型，可以把浏览器特性作为条件，比如IE ，IE 6， IE 7 ，此外还支持 非(!) 、与(&) 、或(|)、 括号、 大于(gt)、 大于等于(gte)、 小于(le) 、 小于等于(lte)。
直观的代码如下：
p class="accent">
!--[if IE]>
According to the conditional comment this is IEbr />
![endif]-->
!--[if IE 6]>
According to the conditional comment this is IE 6br />
![endif]-->
!--[if IE 7]>
According to the conditional comment this is IE 7br />
![endif]-->
!--[if IE 8]>
According to the conditional comment this is IE 8br />
![endif]-->
!--[if IE 9]>
According to the conditional comment this is IE 9br />
![endif]-->
!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higherbr />
![endif]-->
!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9br />
![endif]-->
!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7br />
![endif]-->
!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6br />
![endif]-->
!--[if !IE]> -->
According to the conditional comment this is not IEbr />
!-- ![endif]-->
/p>复制代码
更详细的信息可以在微软MSDN文档中查看
基础介绍完毕，这个东西可以做IE浏览器检测，所以变成了CSS兼容多版本浏览器的方案之一。
最普遍使用场景1
!--[if IE 8]>
link href" rel="stylesheet" type="text/css" media="screen" />
![endif]-->
!--[if IE 7]>
link hr" rel="stylesheet" type="text/css" media="screen" />
![endif]-->
!--[if lt IE 7]>
link href="ss" rel="stylesheet" type="text/css" media="screen" />
![endif]-->复制代码
既可以解决浏览器差异，还可以保证CSS的标准化，避免了很多私有CSS属性作为hack的方式。
可是这样会增加过多的文件加载，维护代码数量也增加，有没有更好的方式?
使用场景2
!--[if lt IE 7]>html class="ie6 oldie" lang="zh">![endif]-->
!--[if IE 7]>html class="ie7 oldie" lang="zh">![endif]-->
!--[if IE 8]>html class="ie8 oldie" lang="zh">![endif]-->
!--[if gt IE 8]>!--> html lang="zh"> !--![endif]-->复制代码
场景1中的问题就解决了。通过选择器的优先级就可以轻松解决差异。
有了条件注释，JS也能从总获益，免去的通过JS去判断浏览器类型和版本了。
比如：如果你的页面想使用html5标签，条件注释也能发挥作用。
!--[if lte IE 8]>
script>
(function(){
var e="abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,
footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),
i=e.length;
while(i--){
document.createElement(e[i]);
}
})();
/script>
![endif]-->复制代码
再比如：IE6的背景图片缓存问题!--[if IE 6]>
script>
document.execCommand("BackgroundImageCache", false, true);
/script>
![endif]-->复制代码
甚至还可以帮助JS直接获取浏览器信息，大多数库和方案识别浏览器都是通过userAgent串处理的，而且大部分的应用场景也是if （IExx） {doxx}
function isIE(v)
var v=v || "",
tester=document.createElement('div');
tester.innerHTML='!--[if IE ' + v + ']>i>/i>![endif]-->';
return !!tester.getElementsByTagName('i')[0];
}复制代码
form: hect/
还可以在HTML代码中玩
body>
!--[if lte IE 8]>
p>亲爱的用户，您的浏览器版本过低，建议您升级浏览器获得更好的体验..../p>
![endif]-->复制代码
或许还有更多的玩法，就等待您的发现和分享了。
最后，条件注释也不仅限于HTML中，JS也可以有，那就是JScript的特性了，这种坑爹的东东还是少用的好，因为JS中的注释总是要被压缩掉的。
script>
/script>复制代码