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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 Javascript
openlayers实现图标拖动获取坐标
Sep 25 Javascript
小程序实现文字循环滚动动画
Jun 14 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
拖拉表格的JS函数
2008/11/20 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
python中list列表的高级函数
2016/05/17 Python
Python实现简单的四则运算计算器
2016/11/02 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
儿童python练习实例
2018/05/27 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
分析经典Python开发工程师面试题
2019/04/08 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
零基础小白多久能学会python
2020/06/22 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
优秀交警事迹材料
2014/01/26 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
家长评语怎么写
2014/12/30 职场文书
Python闭包的定义和使用方法
2022/04/11 Python
python实现学生信息管理系统(面向对象)
2022/06/05 Python