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的大众点评,分类导航实现代码
Aug 23 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 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生成随机密码的三种方法小结
2010/09/04 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php算法实例分享
2015/07/14 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
Python简单日志处理类分享
2015/02/14 Python
解读python如何实现决策树算法
2018/10/11 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
公休请假条
2014/04/11 职场文书
法院授权委托书范文
2014/08/02 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
会计岗位工作总结
2015/08/12 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
springboot用户数据修改的详细实现
2022/04/06 Java/Android