首页 > 建站教程 > html教程 >  HTML基础知识:IE条件注释的详解正文

HTML基础知识:IE条件注释的详解

IE条件注释

什么是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]-->