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算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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 购物车的例子
2009/05/04 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
基于windows下pip安装python模块时报错总结
2018/06/12 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
见习期自我鉴定
2013/11/07 职场文书
车辆工程专业求职信
2014/04/28 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
Redis读写分离搭建的完整步骤
2021/09/14 Redis
浅谈Redis缓冲区机制
2022/06/05 Redis