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高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
js实现文字截断功能
Sep 14 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
在实例中重学JavaScript事件循环
Dec 03 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并发访问实例代码
2012/09/06 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
js中new一个对象的过程
2017/02/20 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
React组件生命周期详解
2017/07/03 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
理解Python中的类与实例
2015/04/27 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
python让列表倒序输出的实例
2018/06/25 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
老人祝寿主持词
2014/03/28 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android