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 相关文章推荐
(仅IE下有效)关于checkbox 三态
May 12 Javascript
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
如何用JS模拟实现数组的map方法
Jul 30 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
Protoss兵种介绍
2020/03/14 星际争霸
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
浅析php学习的路线图
2013/07/10 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
JS模拟多线程
2007/02/07 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
javascript简易画板开发
2020/04/12 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
react中使用swiper的具体方法
2018/05/15 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
单位授权委托书范本
2014/09/26 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书