IE的有条件注释判定IE版本详解(附实例代码)


Posted in Javascript onJanuary 04, 2012

IE的有条件注释是一种专有的(因此是非标准的)、对常规(X)HTML注释的Miscrosoft扩展。顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块。尽管是非标准的,但是有条件注释对于其他所有浏览器作为常规注释出现,因此本质上是无害的。有条件注释在Windows上的IE5中首次出现,并且得到了Widnows浏览器所有后续版本的支持。

IE的有条件注释及其有效,而且非常容易记住。主要的缺点是这些注释需要放在HTML页面中,而不是放在CSS中。这样,当你不需要这些东西,或者有所更改的时候,就需要维护很多的地方。

让我们据几个例子来看看吧——

只有IE才能识别
因为只有IE5以上的版本才开始支持IE条件注释,所有“只有IE”才能识别的意思是“只有IE5版本以上”才能识别。

<!--[if IE]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

只有特定版本才能识别
例如,只有IE5才能识别,只有IE6才能识别,只有IE7或者IE8才能识别。识别的条件是特定的版本,高了或者低了都不可以。例如下面的代码块,将只会在IE8中有效
<!--[if IE 8]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

IE的有条件注释判定IE版本详解(附实例代码) 
只有不是特定版本的才能识别
当然,IE浏览器需要在5以上的版本,才在讨论范围之内。例如下面的例子中,特定了IE7版本不能识别。
<!--[if !IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

IE的有条件注释判定IE版本详解(附实例代码) 
只有高于特定版本才能识别
只有高于制定版本的IE浏览器才能识别的代码块。
<!--[if gt IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

IE的有条件注释判定IE版本详解(附实例代码) 
有朋友会问,为什么IE7没有应用到效果呢?那是因为IE7等于IE7,而不是高于IE7。所有IE7也没有起效果。

等于或者高于特定版本才能识别

<!--[if gte IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

IE的有条件注释判定IE版本详解(附实例代码) 
只有低于特定版本的才能识别
<!--[if lt IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

IE的有条件注释判定IE版本详解(附实例代码) 
等于或者低于特定版本的才能识别
<!--[if lte IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

IE的有条件注释判定IE版本详解(附实例代码)
关键词解释
上面那些代码好像很难记的样子,其实只要稍微解释一下关键字就很容易记住了。
lt :就是Less than的简写,也就是小于的意思。
lte :就是Less than or equal to的简写,也就是小于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
!:就是不等于的意思,跟javascript里的不等于判断符相同。
这样解释一下,是不是好记多了。
关于IE条件注释的特别说明
只有IE才能识别哦——
曾经看到过下面的代码,现在想起来不禁有点想笑。这样的代码有什么意义吗?
<!--[if !IE]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->
 
不仅仅是CSS哦
很长时间,我对这个都有一种误解——以为它就是用来根据浏览器不同载入不同css,从而解决样式兼容性问题的。其实,我错了。它其实可以做的更多。它可以保护任何代码块——HTML代码块、JavaScript代码块、服务器端代码……看看下面的代码。
<!--[if IE]> 
你使用的是IE浏览器,还会弹出个框哦。 
<script type="text/javascript"> alert("你使用的是IE浏览器!");</script> 
<![endif]-->
Javascript 相关文章推荐
JavaScript中Math对象使用说明
Jan 16 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
js变量以及其作用域详解
Jul 18 #Javascript
分享一个asp.net pager分页控件
Jan 04 #Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 #Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 #Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 #Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 #Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 #Javascript
You might like
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
python合并同类型excel表格的方法
2018/04/01 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
应用数学自荐书范文
2013/11/24 职场文书
售后专员岗位职责
2013/12/08 职场文书
公积金转移接收函
2014/01/11 职场文书
继承权公证书
2014/04/09 职场文书
倡议书的写法
2014/08/30 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
鸦片战争观后感
2015/06/09 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
详解Redis基本命令与使用场景
2021/06/01 Redis
Django rest framework如何自定义用户表
2021/06/09 Python
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android