IE的有条件注释判定IE版本详解（附实例代码）

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浏览器需要在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]-->

赞 (0)

相关推荐

  • 用javascript判断IE版本号简单实用且向后兼容

    今天一个项目中需要判断IE版本号,又因为 jQuery 2.0 去除了对浏览器版本号的判断(它推荐特性检测),于是就看到一老外写的一段代码: 复制代码 代码如下: var _IE = (function(){ var v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i'); while ( div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i

  • JavaScript判断IE版本型号

    下面通过代码给大家讲解下,具体请看下文: IE浏览器与非IE浏览器的区别是IE浏览器支持ActiveXObject,但是非IE浏览器不支持ActiveXObject.在IE11浏览器还没出现的时候我们判断IE和非IE经常是这么写的 复制代码 代码如下: function isIe(){      return window.ActiveXObject ? true : false;  } 但是在IE11中上面判断的返回的是false,我自己在IE11测试了下如下代码: 复制代码 代码如下: al

  • js判断ie版本号的简单实现代码

    jQuery 2.0 去除了对浏览器版本号的判断(它推荐特性检测),这里是一个老外写的原生判断方法,这段代码着实巧妙!既简介.有向后兼容!一般做法都是:正则搜索 USER_AGENT :但因为历史原因, USER_AGENT 一直都不准确,而且被各大厂商改的乱七八糟.:比如: IE10 : Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0) IE11 : Mozilla/5.0 (Windows NT 6

  • 用JS判断IE版本的代码 超管用！

    方法一: 复制代码 代码如下: <script language="javascript"> function getIE() { if(navigator.appName == "Microsoft Internet Explorer") { if(navigator.appVersion.match(/7./i)=='7.') { //是IE7,不跳转 } else { //不是,跳转 location.href='http://127.0.0.1'

  • IE的有条件注释判定IE版本详解（附实例代码）

    IE的有条件注释判定IE版本详解（附实例代码）

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

  • IDEA2020.3.2版本自动注释类和方法注释模板配置步骤详解

    IDEA2020.3.2版本自动注释类和方法注释模板配置步骤详解

    想来大家在学习或者开发的环境下经常要自己注解类和方法吧:下面我来为大家讲解怎么创建自己的注解模板: 一.配置类自动注解 1.打开idea file–>Settings–> 2.按照下图的步骤:直接搜索file and code–>导航栏点击File and Code Templates–>点击files文件类型–>然后选择Class文件模板在里面编辑自己想要的模板–>点击apply应用一下–>点击ok.如果还要设置方法模板的话先别急着点ok. 类注解代码片:根据自

  • Python使用sql语句对mysql数据库多条件模糊查询的思路详解

    Python使用sql语句对mysql数据库多条件模糊查询的思路详解

    def find_worldByName(c_name,continent): print(c_name) print(continent) sql = " SELECT * FROM world WHERE 1=1 " if(c_name!=None): sql=sql+"AND ( c_name LIKE '%"+c_name+"%' )" if(continent!=None): sql=sql+" AND ( continent

  • Apache Hadoop版本详解

    Apache Hadoop版本详解

    由于Hadoop版本混乱多变,因此,Hadoop的版本选择问题一直令很多初级用户苦恼.本文总结了ApacheHadoop和Cloudera Hadoop的版本衍化过程,并给出了选择Hadoop版本的一些建议. 1.Apache HadoopApache版本衍化 截至目前(2012年12月23日),ApacheHadoop版本分为两代,我们将第一代Hadoop称为Hadoop 1.0,第二代Hadoop称为Hadoop2.0.第一代Hadoop包含三个大版本,分别是0.20.x,0.21.x和0.

  • ThinkPHP Where 条件中常用表达式示例(详解)

    Where 条件表达式格式为: $map['字段名'] = array('表达式', '操作条件'); 其中 $map 是一个普通的数组变量,可以根据自己需求而命名.上述格式中的表达式实际是运算符的意义: ThinkPHP运算符 与 SQL运算符 对照表 TP运算符 SQL运算符 例子 实际查询条件 eq = $map['id'] = array('eq',100); 等效于:$map['id'] = 100; neq != $map['id'] = array('neq',100); id !

  • 对python中的控制条件、循环和跳出详解

    对python中的控制条件.循环和跳出详解 代码缩进(代码块): python用缩进表示代码块,没有其他语言的大括号 缩进是强制检查,整个代码缩进必须一致,否则无法运行 用2.4个空格或者tab缩进 ide自动保证缩进一致 If.elif和else的条件分支: if if...else if...elif..else 没有switch.case语法 空的列表.元祖.字符串.0都被评估为False None被评估为False 控制条件后面必须加":" a=100 if a > 80

  • 对pandas中iloc,loc取数据差别及按条件取值的方法详解

    Dataframe使用loc取某几行几列的数据: print(df.loc[0:4,['item_price_level','item_sales_level','item_collected_level','item_pv_level']]) 结果如下,取了index为0到4的五行四列数据. item_price_level item_sales_level item_collected_level item_pv_level 0 3 3 4 14 1 3 3 4 14 2 3 3 4 14

  • Idea自定义方法注释模板的教程详解(去param括号、return全类名)

    一.自定义方法模板 1. File >> Settings- >> Editor >> Live Templates 2. 点击创建Group,随意起名 3. 创建模板 4. 填写模板信息 按自己习惯写,我的: * * 方法描述 * @since: 1.14.1 * @param: $params$ * @return: $returns$ * @author: zhang * @date: $date$ */ 5. 设置 设置模板参数自动取值 直接下拉选择 点击下方黄

  • Go语言基础if条件语句用法及示例详解

    Go语言基础if条件语句用法及示例详解

    目录 概述 语法 格式规则 概述 条件语句需要开发者通过指定一个或多个条件 并通过测试条件是否为 true 来决定是否执行指定语句 并在条件为 false 的情况再执行另外的语句. 语法 package main func main() { //第一种格式 if 条件表达式 { 语句1 } //第二种格式 if 初始化表达式; 条件表达式 { 语句1 } //第三种格式 if 初始化表达式; 条件表达式 { 语句1 }else{ 语句2 } //第四种格式 if 初始化表达式; 条件表达式 {

  • package.json管理依赖包版本详解

    package.json管理依赖包版本详解

    目录 npm版本号定义 package.json怎么识别依赖版本 不要太相信npm包的版本号 dependencies.devDependencies与peerDependencies dependencies devDependencies peerDependencies 参考 npm版本号定义 版本格式:X.Y.Z[-string]其含义为: X:主版本号 Y:次版本号 Z:修正版本号 string: 先行版本号或版本编译信息 举个例子: 6.3.2-alpha的含义为: 主版本号6,有6

随机推荐