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 验证表单(form)中的单选(radio)值
Sep 08 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
村官学习十八大感想
2014/01/15 职场文书
上班看电影检讨书
2014/02/12 职场文书
可口可乐广告词
2014/03/20 职场文书
护士自我推荐信范文
2015/03/24 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript