IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句,作用是可以灵活的为不同IE版本浏览器导入不同html元素,如:样式表,html标签等。很显然这种方法的最大好处就在于属于微软官方给出的兼容解决办法而且还能通过W3C的效验。

让我们举几个例子来看看:

1、只有IE才能识别 
   1: <!--[if IE]>

   2:  <link type="text/css" rel="stylesheet" href="my.css" />

   3: <![endif]-->

因为只有IE5以上的版本才开始支持IE条件注释,所有“只有IE”才能识别的意思是“只有IE5版本以上”才能识别。

2、只有特定版本才能识别

   1: <!--[if IE 8]> 

   2: <link type="text/css" rel="stylesheet" href="my.css" />   

   3: <![endif]-->

识别特定的IE版本,高了或者低了都不可以。上例只有IE8才能识别。

3、只有不是特定版本的才能识别
   1: <!--[if !IE 7]> 

   2: <link type="text/css" rel="stylesheet" href="my.css" />   

   3: <![endif]-->

上例中特定IE7版本不能识别,其他版本都能识别,当然要在IE5以上。

4、只有高于特定版本才能识别

   1: <!--[if gt IE 7]> 

   2: <link type="text/css" rel="stylesheet" href="my.css" />   

   3: <![endif]-->

上例中只有高于IE7的版本才能识别。IE7无法识别。

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

   1: <!--[if gte IE 7]> 

   2: <link type="text/css" rel="stylesheet" href="my.css" />   

   3: <![endif]-->

上例中IE7和更高的版本都能识别。

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

   1: <!--[if lt IE 7]> 

   2: <link type="text/css" rel="stylesheet" href="my.css" />   

   3: <![endif]-->

上例中只有低于IE7的版本才能识别,IE7无法识别。

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

   1: <!--[if lte IE 7]> 

   2: <link type="text/css" rel="stylesheet" href="my.css" />   

   3: <![endif]-->

上例中IE7和更低的版本可以识别。

关键词解释

上面那些代码好像很难记的样子,其实只要稍微解释一下关键字就很容易记住了。

lt :就是Less than的简写,也就是小于的意思。

lte :就是Less than or equal to的简写,也就是小于或等于的意思。

gt :就是Greater than的简写,也就是大于的意思。

gte:就是Greater than or equal to的简写,也就是大于或等于的意思。

!:就是不等于的意思,跟javascript里的不等于判断符相同。

这样解释一下,是不是好记多了。

特别提示:

1、有人会试图使用<!--[if !IE]>来定义非IE浏览器下的状况,但注意:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。

2、我们通常用IE条件注释根据浏览器不同载入不同css,从而解决样式兼容性问题的。其实它可以做的更多。它可以保护任何代码块——HTML代码块、JavaScript代码块、服务器端代码……看看下面的代码。

   1: <!--[if IE]> 

   2: <script type="text/javascript"> 

   3:  alert("你使用的是IE浏览器!"); 

   4: </script> 

   5: <![endif]-->

IE条件注释详解的更多相关文章

  1. JScript中的条件注释详解(转载自网络)

    JScript中的条件注释详解-转载 这篇文章主要介绍了JScript中的条件注释详解,本文讲解了@cc_on.@if.@set.@_win32.@_win16.@_mac等条件注释语句及可用于条件编 ...

  2. IE的有条件注释详解

    IE的有条件注释是一种专有的(因此是非标准的).对常规(X)HTML注释的Miscrosoft扩展.顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块.尽管是非标准的,但是有条件注释对于 ...

  3. Nginx配置文件中文注释详解

    Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sysoev ...

  4. 关于opencv中人脸识别主函数的部分注释详解。

    近段时间在搞opencv的视频人脸识别,无奈自带的分类器的准确度,实在是不怎么样,但又能怎样呢?自己又研究不清楚各大类检测算法. 正所谓,功能是由函数完成的,于是自己便看cvHaarDetectObj ...

  5. java注释详解--javadoc注释

    一. Java注释分类// 注释一行 /* ...... */ 注释若干行 /** ...... */ 注释若干行,并写入 javadoc 文档 通常这种注释的多行写法如下: /** * ...... ...

  6. mapreduce入门之wordcount注释详解

    mapreduce版本:0.2.0之前 说明: 该注释为之前学习时找到的一篇,现在只是在入门以后对该注释做了一些修正以及添加. 由于版本问题,该代码并没有在集群环境中运行,只将其做为理解mapredu ...

  7. Python学习教程(learning Python)--3.3 分支语句的条件表达式详解

    本节主要讨论分支语句的条件表达式问题. 在if或者if-else分支控制语句里由于都用到条件判断(表达式是真还是假),条件判断可以是一种关系运算也可以是布尔表达式. 本节将对if及if-else语句的 ...

  8. MySQL数据库my.cnf配置文件注释详解

    我们知道,在MySQL数据库安装完成后,要对my.cnf配置文件进行适当的修改才能充分利用MySQL数据库的功能.但是对于初学者来说,修改my.cnf配置文件似乎是一个比较难的过程.为了解决这个问题, ...

  9. Java基础入门 - 三种注释及文档注释详解

    类似C/C++,Java也支持单行和多行注释 注释中的字符在编译时会被忽略 注释通常为类.变量和方法的主要描述 单行注释 // 注释内容 多行注释 /* 注释内容 */ /* * 注释内容 */ 文档 ...

随机推荐

  1. ListView 加载更多列表 Load More mono forandroid 项目笔记

    今天项目经理找我说Listview加载更多的时候会出现一些问题,主要表现在会顿一下.让我我就去找Java的方法看看.自己写出了mono 的加载更多功能.和大家分享一下 先看效果 首先是模型类ListI ...

  2. Java多线程18:线程池

    使用线程池与不使用线程池的差别 先来看一下使用线程池与不适应线程池的差别,第一段代码是使用线程池的: public static void main(String[] args) { long sta ...

  3. mvvm的优势

    之前在项目中有个功能,是根据数据模型生成页面,然后页面变动之后,再同步到数据模型之中. 当时用的jquery写的,一点一点的控制,整个功能写下来.测试,花了很长时间,而且还担心出bug. 现在用mvv ...

  4. Hadoop Pig简介、安装、试用

    相比Java的MapReduce api,Pig为大型数据集的处理提供了更高层次的抽象,与MapReduce相比,Pig提供了更丰富的数据结构,一般都是多值和嵌套的数据结构.Pig还提供了一套更强大的 ...

  5. Window Ghosting

    最近工作中遇到Window Ghosting这个问题, 感觉挺有意思,这里简单记录下. 在XP时代我们的程序没有响应后只能通过任务管理器强制杀掉,但是Vista之后情况变了, 我们仍然可以拖动失去响应 ...

  6. [我给Unity官方视频教程做中文字幕]beginner Graphics – Lessons系列之材质了解Materials

    [我给Unity官方视频教程做中文字幕]beginner Graphics – Lessons系列之材质了解Materials 既上一篇分享了中文字幕的灯光介绍Lights后,本篇分享一下第3个已完工 ...

  7. Vue的一个陷阱

    最近做项目,上线前一直有个bug,不知道是什么原因引起的, vm.$set('needVerification', true); $('.verification-button').prop('dis ...

  8. cocoapods 更新

    sudo gem update --system sudo gem install cocoapods pod setup pod --version

  9. react4 props 解析

    <body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...

  10. easyui combotree下拉框多选赋值

    发现jquery.easyui.min.js 1.3.4版本的用setValues给多选下拉框赋值不成功,只能用1.3.1版本的 Html代码: <input id="ProductL ...