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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
js中的this关键字详解
Sep 25 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
js实现显示手机号码效果
Mar 09 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
vue实现评论列表功能
2019/10/25 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
讲解Python中运算符使用时的优先级
2015/05/14 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
python调试神器PySnooper的使用
2019/07/03 Python
python实现自动打卡的示例代码
2020/10/10 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
2014年五四青年节活动策划书
2014/04/22 职场文书
5s推行计划书
2014/05/06 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis