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 相关文章推荐
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
js实现聊天对话框
Feb 08 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 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
咖啡的传说和历史
2021/03/03 新手入门
自定义PHP分页函数
2006/10/09 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
深入解析php中的foreach问题
2013/06/30 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP分享图片的生成方法
2018/04/25 PHP
初学Javascript的一些总结
2008/11/03 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
python万年历实现代码 含运行结果
2017/05/20 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
python已协程方式处理任务实现过程
2019/12/27 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
iostream与iostream.h的区别
2015/01/16 面试题
会计助理的岗位职责
2013/11/29 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
2019财务转正述职报告
2019/06/27 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
Python基于百度AI实现抓取表情包
2021/06/27 Python
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
js前端图片加载异常兜底方案
2022/06/21 Javascript