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 相关文章推荐
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
js判断节假日实例代码
Dec 27 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 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
PHP生成月历代码
2007/06/14 PHP
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
纯JS实现轮播图
2017/02/22 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
Python实现自动上京东抢手机
2018/02/06 Python
Python实现ping指定IP的示例
2018/06/04 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
python datetime中strptime用法详解
2019/08/29 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
会计专业毕业生自我评价
2013/09/25 职场文书
商场消防演习方案
2014/02/12 职场文书
警校毕业生自我评价
2014/04/06 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
详解jQuery的核心函数和事件处理
2022/02/18 jQuery