IE 条件注释详解总结(附实例代码)


Posted in Javascript onAugust 29, 2009

顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块。尽管是非标准的,但是有条件注释对于其他所有浏览器作为常规注释出现,因此本质上是无害的。有条件注释在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浏览器需要在5以上的版本,才在讨论范围之内。例如下面的例子中,特定了IE7版本不能识别。
<!--[if !IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->
 
IE 条件注释详解总结(附实例代码) 
只有高于特定版本才能识别
只有高于制定版本的IE浏览器才能识别的代码块。
<!--[if gt IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

有朋友会问,为什么IE7没有应用到效果呢?那是因为IE7等于IE7,而不是高于IE7。所有IE7也没有起效果。
等于或者高于特定版本才能识别
<!--[if gte IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

IE 条件注释详解总结(附实例代码) 
只有低于特定版本的才能识别
<!--[if lt IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

IE 条件注释详解总结(附实例代码) 
等于或者低于特定版本的才能识别
<!--[if lte IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
JavaScript实现前端倒计时效果
Feb 09 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
基于jQuery的ajax功能实现web service的json转化
Aug 29 #Javascript
用户注册常用javascript代码
Aug 29 #Javascript
csdn 博客中实现运行代码功能实现
Aug 29 #Javascript
js 分栏效果实现代码
Aug 29 #Javascript
javascript 简练的几个函数
Aug 29 #Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 #Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 #Javascript
You might like
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
mac下安装nginx和php
2013/11/04 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Sanic框架流式传输操作示例
2018/07/18 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
学生会干部自荐信
2014/02/04 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
环卫处个人工作总结
2015/03/04 职场文书
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android