IE 条件注释详解总结(附实例代码)_javascript技巧

顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块。尽管是非标准的,但是有条件注释对于其他所有浏览器作为常规注释出现,因此本质上是无害的。有条件注释在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浏览器需要在5以上的版本,才在讨论范围之内。例如下面的例子中,特定了IE7版本不能识别。

复制代码 代码如下:

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

 
 
只有高于特定版本才能识别
只有高于制定版本的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]-->

 
只有低于特定版本的才能识别

复制代码 代码如下:

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

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

复制代码 代码如下:

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

 
关键词解释
上面那些代码好像很难记的样子,其实只要稍微解释一下关键字就很容易记住了。
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]-->

时间: 2024-09-17 03:32:34

IE 条件注释详解总结(附实例代码)_javascript技巧的相关文章

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

IE的有条件注释是一种专有的(因此是非标准的).对常规(X)HTML注释的Miscrosoft扩展.顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块.尽管是非标准的,但是有条件注释对于其他所有浏览器作为常规注释出现,因此本质上是无害的.有条件注释在Windows上的IE5中首次出现,并且得到了Widnows浏览器所有后续版本的支持. IE的有条件注释及其有效,而且非常容易记住.主要的缺点是这些注释需要放在HTML页面中,而不是放在CSS中.这样,当你不需要这些东西,或者有所更改的

javascript replace()用法详解附实例代码_javascript技巧

replace()最简单的算是能力就是简单的字符替换.示例代码如下: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 我想大家运行后可以看到结果,它只替换了首字母.但如果加上正则表达式结果就不一样了!呵呵,没错.replace()支持正则表达式,它可以按照正则表达式的规则匹配字符或字符串,然后给予替换! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 呵呵,您一定发现了.这样还是只替换了第一个字母a.如果您熟悉正则,那这就难不住您.稍加修改就OK了. [Ctrl+A 全选

JS动态添加option和删除option(附实例代码)_javascript技巧

1.动态创建select 复制代码 代码如下: function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项option 复制代码 代码如下: function addOption(){ //根据id查找对象, var obj=docume

js实现ArrayList功能附实例代码_javascript技巧

1.ArrayList方法摘要 构造方法摘要 ArrayList() 构造一个初始容量为 10 的空列表. ArrayList(Collection<? extends E> c) 构造一个包含指定 collection 的元素的列表,这些元素是按照该 collection 的迭代器返回它们的顺序排列的. ArrayList(int initialCapacity) 构造一个具有指定初始容量的空列表. 方法摘要 boolean add(E e) 将指定的元素添加到此列表的尾部. void ad

Javascript 数组去重的方法(四种)详解及实例代码_javascript技巧

 Javascript 数组去重的四种方法 四种算法来实现这个目的: 第一种方法: Array.prototype.unique1 = function () { var n = []; //一个新的临时数组 for (var i = 0; i < this.length; i++) //遍历当前数组 { //如果当前数组的第i已经保存进了临时数组,那么跳过, //否则把当前项push到临时数组里面 if (n.indexOf(this[i]) == -1) n.push(this[i]); }

JavaScript 身份证号有效验证详解及实例代码_javascript技巧

最近需要对身份证合法性进行验证,实名验证是不指望了,不过原来的验证规则太过简单,只是简单的验证了身份证长度,现在业务需要加强下身份证验证规则,网上找到了不少资料,不过都不合偶的心意,无奈只好直接写一个,代码还是用自己的舒服哈 JavaScript验证身份证号 <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>

Swift Self详解及简单实例代码_IOS

Swift中Self的使用 用于消除访问属性,调用方法时所产生的歧义. 当函数的参数名和自身的属性名同名时,例如: /* 使用self指明被访问的是自身属性还是参数 */ class AClass { var greeting: String init(greeting: String) { // 使用self区分属性和参数 self.greeting = greeting } } 在便利构造函数中调用自身的指定构造函数时,例如: convenience init() { /* 必须使用self

Websocket协议详解及简单实例代码_基础知识

Websocket协议详解 关于websocket的协议是用来干嘛的,请参考其他文章. WebSocket关键词 HTML5协议,实时,全双工通信,长连接 WebSocket比传统Http的好处 客户端与服务端只建立一个TCP连接,可以使用更少的连接 WebSocket的服务端可以将数据推送到客户端,如实时将证券信息反馈到客户端(这个很关键),实时天气数据,比http请求响应模式更灵活 更轻量的协议头,减少数据传送量 数据帧格式 下图为手工打造的数据帧格式 /** * fin |masked |

JavaScript 闭包机制详解及实例代码_javascript技巧

首先要区分两个概念,一是匿名函数,一是闭包. 所谓匿名函数,就是创建函数没有给定函数名.经常出现的包括函数表达式,就是定义一个匿名函数,然后将函数赋值给某个变量,而此时这个变量就相当于该函数的函数名,例如: var sayHi = function(){ alert("Hi"); }; //注意这个分号 sayHi(); //调用函数 还有一种常用匿名函数的情况是回调函数,如 JQuery 中常用到的: $("p").click(function(){ alert(