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 相关文章推荐
jquery 新浪网易的评论块制作
Jul 01 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 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
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
原生js实现分页效果
2020/09/23 Javascript
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
python操作excel的方法
2018/08/16 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
为什么称python为胶水语言
2020/06/16 Python
迪拜航空官方网站:flydubai
2017/04/20 全球购物
高校自主招生自荐信
2013/12/09 职场文书
党员学习十八大感想
2014/01/17 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript