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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
javascript this详细介绍
Sep 19 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
vue小白入门教程
Apr 02 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 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.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
JavaScript类库D
2010/10/24 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
Python中字典的基本知识初步介绍
2015/05/21 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
简历的个人自我评价范文
2014/01/03 职场文书
个人自我鉴定总结
2014/03/25 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript
mysql数据库如何转移到oracle
2022/12/24 MySQL