IE条件注释可以怎么玩[汇总]

ie-Conditional

如果玩过条件注释的,可以忽略以下基础介绍。

E条件注释(Conditional comments)是IE浏览器私有的代码,是一个类似IF判断的语法注释块,IE5之上支持。

代码看起来是这样的:

<!--[if IE 6]>
你正在使用IE6
<![endif]-->

他的语法是一个普通的HTML注释 <!– comments –>,分支块以 [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 IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
</p>

更详细的信息可以在微软MSDN文档中查看:http://msdn.microsoft.com/en-us/library/ms537512.aspx

基础介绍完毕,这个东西可以做IE浏览器检测,所以变成了CSS兼容多版本浏览器的方案之一。

最普遍使用场景1

<!--[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的方式。可是这样会增加过多的文件加载,维护代码数量也增加,有没有更好的方式?

最普遍使用场景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]-->
标签: