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 01 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
python实现web方式logview的方法
2015/08/10 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
利用python生成照片墙的示例代码
2020/04/09 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
C语言基础笔试题
2013/04/27 面试题
新闻专业学生的自我评价
2014/02/13 职场文书
班组长岗位职责
2014/03/03 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
家长学校培训材料
2014/08/20 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
个人工作能力自我评价
2015/03/05 职场文书
2015初中团委工作总结
2015/07/28 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
python 批量压缩图片的脚本
2021/06/02 Python