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 树形结构的选择器
Feb 15 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
js获取域名的方法
Jan 27 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
JavaScript反射与依赖注入实例详解
May 29 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
非常不错的MySQL优化的8条经验
2008/03/24 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
javascript 尚未实现错误解决办法
2008/11/27 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
python基础教程之对象和类的实际运用
2014/08/29 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
高中毕业生自我鉴定
2013/11/03 职场文书
七一慰问简报
2015/07/20 职场文书
五年级数学教学反思
2016/02/16 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
Java Dubbo框架知识点梳理
2021/06/26 Java/Android