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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
传智播客学习之java 反射
Nov 22 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
基于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
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
koa-router源码学习小结
2018/09/07 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
js实现简易计算器功能
2019/10/18 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
python中Switch/Case实现的示例代码
2017/11/09 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
电气自动化自荐信
2013/10/10 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
2014年学习部工作总结
2014/11/12 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
正规借条模板
2015/05/26 职场文书
个人合作协议范本
2015/08/06 职场文书
青年教师听课心得体会
2016/01/15 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB