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 相关文章推荐
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 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
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
JS实现页面打印功能
2017/03/16 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
python操作MongoDB基础知识
2013/11/01 Python
python在不同层级目录import模块的方法
2016/01/31 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python提取频域特征知识点浅析
2019/03/04 Python
python搜索算法原理及实例讲解
2020/11/18 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
自我鉴定思想方面
2013/10/07 职场文书
高中军训广播稿
2014/01/14 职场文书
财务担保书范文
2014/04/02 职场文书
团日活动总结书
2014/05/08 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python