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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
简单的js分页脚本
May 21 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
JS实现购物车特效
Feb 02 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
angular directive的简单使用总结
May 24 Javascript
spring+angular实现导出excel的实现代码
Feb 27 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通过curl模拟登陆DZ论坛
2015/05/11 PHP
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
Python中的heapq模块源码详析
2019/01/08 Python
利用python实现逐步回归
2020/02/24 Python
创伤外科专业推荐信范文
2013/11/19 职场文书
行政总经理岗位职责
2013/12/05 职场文书
记帐员岗位责任制
2014/02/08 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
python缺失值的解决方法总结
2021/06/09 Python
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS