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 相关文章推荐
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 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获取表单中多个同名input元素的值
2014/03/20 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
Symfony控制层深入详解
2016/03/17 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
JavaScript 异步调用
2017/10/25 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
python黑魔法之参数传递
2016/02/12 Python
python读取Excel实例详解
2018/08/17 Python
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
职专应届生求职信
2013/11/16 职场文书
工程项目经理岗位职责
2013/12/15 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
心术观后感
2015/06/11 职场文书
出生证明格式
2015/06/15 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
《迟到》教学反思
2016/02/24 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL