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动态绑定事件的简单实现代码
Dec 25 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
python DataFrame 修改列的顺序实例
2018/04/10 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
python opencv进行图像拼接
2020/03/27 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
出国英文推荐信
2014/05/10 职场文书
户籍证明书标准模板
2014/09/10 职场文书
售后客服个人自我评价
2014/09/14 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
Python学习之os包使用教程详解
2022/03/21 Python