IE的有条件注释判定IE版本详解(附实例代码)


Posted in Javascript onJanuary 04, 2012

IE的有条件注释是一种专有的(因此是非标准的)、对常规(X)HTML注释的Miscrosoft扩展。顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块。尽管是非标准的,但是有条件注释对于其他所有浏览器作为常规注释出现,因此本质上是无害的。有条件注释在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版本详解(附实例代码) 
只有不是特定版本的才能识别
当然,IE浏览器需要在5以上的版本,才在讨论范围之内。例如下面的例子中,特定了IE7版本不能识别。
<!--[if !IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

IE的有条件注释判定IE版本详解(附实例代码) 
只有高于特定版本才能识别
只有高于制定版本的IE浏览器才能识别的代码块。
<!--[if gt IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

IE的有条件注释判定IE版本详解(附实例代码) 
有朋友会问,为什么IE7没有应用到效果呢?那是因为IE7等于IE7,而不是高于IE7。所有IE7也没有起效果。

等于或者高于特定版本才能识别

<!--[if gte IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

IE的有条件注释判定IE版本详解(附实例代码) 
只有低于特定版本的才能识别
<!--[if lt IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

IE的有条件注释判定IE版本详解(附实例代码) 
等于或者低于特定版本的才能识别
<!--[if lte IE 7]> 
<style type="text/css"> 
@import "test.css"; 
</style> 
<![endif]-->

IE的有条件注释判定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 编程引入命名空间的方法与代码
Aug 13 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
jquery实现动态操作select选中
Feb 11 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
js变量以及其作用域详解
Jul 18 #Javascript
分享一个asp.net pager分页控件
Jan 04 #Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 #Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 #Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 #Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 #Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 #Javascript
You might like
PHP 彩色文字实现代码
2009/06/29 PHP
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
JQuery toggle使用分析
2009/11/16 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
python 读写中文json的实例详解
2017/10/29 Python
python生成二维码的实例详解
2017/10/29 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
django删除表重建的实现方法
2019/08/28 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
影视艺术学院毕业生自荐信
2013/11/13 职场文书
专升本个人自我评价
2013/12/22 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
导游词之五台山
2019/10/11 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript