IE条件注释可以怎么玩

最新推荐文章于 2022-05-12 20:49:06 发布

白鼠闹东京

最新推荐文章于 2022-05-12 20:49:06 发布

阅读量545

点赞数

分类专栏： html

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

IE条件注释（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]-->
According to the conditional comment this is not IE<br />
</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

<html lang="zh">

复制代码

场景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 = '';
return !!tester.getElementsByTagName('i')[0];
}

复制代码

form: http://ninofocus.com/2011/12/09/ie-browse-detect/

还可以在HTML代码中玩

<body>
<!--[if lte IE 8]>
<p>亲爱的用户，您的浏览器版本过低，建议您升级浏览器获得更好的体验....</p>
<![endif]-->

复制代码

或许还有更多的玩法，就等待您的发现和分享了。

最后，条件注释也不仅限于HTML中，JS也可以有，那就是JScript的特性了，这种坑爹的东东还是少用的好，因为JS中的注释总是要被压缩掉的。

<script>
/*@cc_on
document.write("You are using IE4 or higher");
@*/
</script>

白鼠闹东京

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE条件注释可以怎么玩

如果玩过条件注释的，可以忽略以下基础介绍。IE条件注释（Conditional comments）是IE浏览器私有的代码，是一个类似IF判断的语法注释块，IE5之上支持。代码看起来是这样的你正在使用IE6复制代码他的语法是一个普通的HTML注释，分支块以 [if 条件(conditional)]> 开始直观的代码如
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。