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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
javascript里使用php代码实例
Dec 13 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
80行代码写一个Webpack插件并发布到npm
May 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导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
php创建session的方法实例详解
2015/01/27 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
numpy.random模块用法总结
2019/05/27 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
详解Anaconda 的安装教程
2020/09/23 Python
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
制定岗位职责的原则
2013/11/08 职场文书
求职简历的自我评价
2014/01/31 职场文书
高中毕业自我评价
2014/02/08 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
推销搭讪开场白
2015/05/28 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
python脚本框架webpy的url映射详解
2021/11/20 Python
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
SQL Server中的游标介绍
2022/05/20 SQL Server
MySQL详细讲解变量variables的用法
2022/06/21 MySQL