HTML基础知识：IE条件注释的详解
- 作者：我爱模版网
- 类型：图文教程
- 点击次数：
- 发布时间：2014-01-07 14:37
什么是IE条件注释：
IE条件注释（Conditional comments）是IE浏览器私有的代码，是一个类似IF判断的语法注释块，IE5之上支持。
例如下面：
<!--[if IE]> 您使用的是IE浏览器<br /> <![endif]--> <!--[if IE 6]> 您使用的浏览器是 IE 6<br /> <![endif]--> <!--[if IE 7]> 您使用的浏览器是 IE 7<br /> <![endif]--> <!--[if IE 8]> 您使用的浏览器是 IE 8<br /> <![endif]--> <!--[if IE 9]> 您使用的浏览器是 IE 9<br /> <![endif]--> <!--[if gte IE 8]> 您使用的浏览器是 IE 8 或更高版本<br /> <![endif]--> <!--[if lt IE 9]> 您使用的浏览器是 IE 9 以下版本<br /> <![endif]--> <!--[if lte IE 7]> 您使用的是 IE 7 或更低版本<br /> <![endif]--> <!--[if gt IE 6]> 您使用的是 IE6 或更高版本<br /> <![endif]--> <!--[if !IE]> --> 您使用的不是IE浏览器<br /> <!-- <![endif]-->
语法详解：
以<!-- [if 条件(conditional)]> -->开始<!-- <![endif]-->结束。条件和JS中的if很类似，布尔值类型，可以把浏览器特性作为条件，比如IE ，IE 6， IE 7 ，此外还支持 非(!) 、与(&) 、或(|)、 括号、 大于(gt)、 大于等于(gte)、 小于(le) 、 小于等于(lte)。
CSS方面的使用：
<!--[if IE 8]> <link href="ie8.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]--> <!--[if IE 7]> <link href="ie7.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]--> <!--[if lt IE 7]> <link href="ie7lt.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]-->
既可以解决浏览器差异，还可以保证CSS的标准化，避免了很多私有CSS属性作为hack的方式。但是这样会增加过多的文件加载，维护成本增加。
解决方法：
<!--[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]-->
IE条件注释在js方面的使用：
<!--[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];
}
HTML友情提醒：
<!--[if lte IE 8]> <p>亲爱的用户，您的浏览器版本过低，建议您升级浏览器获得更好的体验....</p> <![endif]-->
- 本文标签：
- IE条件注释,if IE 6
