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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
JS实现电商放大镜效果
Aug 24 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
layer插件select选中默认值的方法
Aug 14 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 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
实用函数3
2007/11/08 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
php 数据结构之链表队列
2017/10/17 PHP
js获取对象为null的解决方法
2013/11/21 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
python算法表示概念扫盲教程
2017/04/13 Python
python3实现名片管理系统
2020/11/29 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python getpass实现密文实例详解
2019/09/24 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
幼儿园长自我鉴定
2013/10/17 职场文书
投标邀请书范文
2014/01/31 职场文书
《藏戏》教学反思
2014/02/11 职场文书
供货协议书范本
2014/04/22 职场文书
给校长的建议书400字
2014/05/15 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
小王子读书笔记
2015/06/29 职场文书
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫