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的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
基于iview的router常用控制方式
May 30 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 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下连接mssql2005的代码
2011/01/17 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
Python中的单继承与多继承实例分析
2018/05/10 Python
python字符串与url编码的转换实例
2018/05/10 Python
python中int与str互转方法
2018/07/02 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
Django中URL的参数传递的实现
2019/08/04 Python
python ftplib模块使用代码实例
2019/12/31 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
PHP面试题及答案一
2012/06/18 面试题
广州一家公司的.NET面试题
2016/06/11 面试题
文秘专业应届生求职信范文
2013/11/14 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
课文《燕子》教学反思
2016/02/17 职场文书