Ie - 条件注释区分IE、非IE浏览器

条件注释判断浏览器在实际中经常使用,比如css样式,js文件的兼容等根据浏览器不同进行判断加载,感兴趣的朋友可以参考下

1、条件注释:

  IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,也是WEB设计中常用的一种hack方法。

  条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

  IE浏览器的条件注释是IE特有的一种非常强大功能,区分IE浏览器版本(通过true和false判断),能对IE系列产品进行单独的XHTML代码处理,注意,主要是针对XHTML,而非CSS。

2、条件注释写法:

  <!--[if IE]> 所有的IE可识别 <![endif]-->

  <!--[if IE 5]> 仅IE5可识别 <![endif]-->

  <!--[if IE 6]> 仅IE6可识别 <![endif]-->

  <!--[if IE 7]> 仅IE7可识别 <![endif]-->

  <!--[if IE 8]> 仅IE8可识别 <![endif]-->

  <!--[if IE 9]> 仅IE9可识别 <![endif]-->

  <!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->

  <!--[if gt IE 7]> IE7以上版本可识别 <![endif]-->

  <!--[if lte IE 7]> IE7以及IE7以下版本可识别 <![endif]-->

  <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

  提示:

  条件注释只能用于IE5以上。

  从IE5.0到7.0都支持注释功能,且版本号精确到小数点后4位。

  lt :简写(Less than)-- 小于

  gt :简写(Greater than)-- 大于

  lte:简写(Less than or equal to)-- 小于、等于

  gte:简写(Greater than or equal to)-- 大于、等于

  ! :不等于

3、对非ie判断写法:

  错误的:

    <!--[if !IE]> not IE<![endif]-->

    错误原因:非ie根本不会识别ie的条件注释,所以就直接全部是注释了

  正确的:

    <!--[if !IE]><!--> 除IE外都可识别 <![endif]-->

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->

    <!--[if !IE]><--> 除IE外都可识别 <![endif]-->

    正确原因:本来这里内容只有非ie能看到的,关键是条件注释后头的 <–>,在IE中被当作内部注释,而在非IE浏览器中会闭合之前的注释,从而起到区分非IE浏览器的作用,一般常用<!–>。

4、其他组合用法:

  <!--[if (gt IE 9)|!(IE)]><!-->  内容  <!--<![endif]-->

  <!--[if (gt IE 9)&!(IE)]><!-->  内容  <!--<![endif]-->

5、使用中注意:

  <!--[if lt IE 9]>  加载CSS1  <!--[else]>  加载CSS2  <![endif]-->

  上述方法:这样有效是有效,但是用HTML VALIDATOR里,报错,因为这个不符合XHTML 1.1的规范,如果把ELSE语句去掉,则正确。

  可修改成:加载CSS2  <!--[if lt IE 9]>  加载CSS1(可以把要重写的写在这里)  <![endif]-->  

水平有限,文中错误不妥在所难免,欢迎批评指正建议评论。文章将不定期修改完善斧正。谢谢!

参考文档:IE的有条件注释详解(附实例代码)

http://www.cnblogs.com/JustinYoung/archive/2009/03/02/ie-jiaojianzhushi.html

时间: 2024-10-10 03:48:13

Ie - 条件注释区分IE、非IE浏览器的相关文章

关于HTML条件注释你可能不知道的一些事儿

最近经常看到类似这样的HTML代码片段,很多前端开发人员应该都熟悉: 1 <!--[if lt IE 7]>      <html class="ie6"> <![endif]-->2 <!--[if IE 7]>         <html class="ie7"> <![endif]-->3 <!--[if IE 8]>         <html class="

浏览器条件注释

原文链接:http://www.blueidea.com/tech/site/2006/3561.asp 浏览器的条件注释理论,用下面一段例子来解释这个问题 (X)HTML 下面一段代码是测试在微软的IE浏览器下的条件注释语句的效果: <!--[if IE]><h1>您正在使用IE浏览器</h1><![endif]--><!--[if IE 5]><h1>版本 5</h1><![endif]--><!--

用条件注释判断浏览器版本解决页面兼容问题

在IE8.IE9上可能好好的,当我们在IE6.IE7或者是其他的浏览器上再浏览这些页面时,可能会发现我们的页面已经面目全非了,那么如何解决兼容问题呢,本文就为大家一一道来对于浏览器兼容问题,我们应该碰到很多了,在平时写一些页面时,在IE8.IE9上可能好好的,当我们在IE6.IE7或者是其他的浏览器上再浏览这些页面时,可能会发现我们的页面已经面目全非了,作为一名前端开发人员,这是最让人发疯的问题了,那么我们该怎么解决这些问题呢? 首先,我们写的页面在不同的浏览器上之所以会出现表现不同的问题,是因

IE浏览器条件注释if IE详解

无论是google还是百度搜到的if IE条件注释用法,排在前面的几个搜索结果文章都是有错误和漏洞的,而这些漏洞和错误导致我一度误以为有些IE条件注释已经失效了,即使不是失效,也令我 很费解.今天抽时间查阅了些老外写的东西,并且都试验了一遍.发现给我造成费解的原因是那些文章大多都是抄来的,没有经过亲自试验,在复制来复制去的过程 中就把某些关键的地方弄错了:( 现将正确的if IE条件注释用法总结一下,以便以后使用: 运算符 示例 说明 ! [if !IE] 非运算符.该例子表示所有的非IE浏览器

用条件注释判断浏览器版本,解决兼容问题

对于浏览器兼容问题,我们应该碰到很多了,在平时写一些页面时,在IE8.IE9上可能好好的,当我们在IE6.IE7或者是其他的浏览器上再浏览这些页面时,可能会发现我们的页面已经面目全非了,作为一名前端开发人员,这是最让人发疯的问题了,那么我们该怎么解决这些问题呢? 首先,我们写的页面在不同的浏览器上之所以会出现表现不同的问题,是因为不同的浏览器在解析页面时,他们所遵循的规则并不是完全相同的.比如IE,不同的版本解析都不同,何况是不同的浏览器厂商,不同的内核呢.但是我们在遇到兼容性问题时,应该首先检

使用html进行浏览器判断,浏览器条件注释

下面来点今天写东西的时候查资料,收集的关于使用html进行浏览器判断的一些资料: 条件注释的基本格式: <!--[if expression]>注释内容<![endif]--> 或者 <![if expression]>注释内容<![endif]> 基本上所有的条件注释就根据上面的内容而来 expression的常用值: IE ie浏览器 IE version 版本为version的ie浏览器 lt IE version 版本号小于version lte I

条件注释判断IE浏览器版本

lt,lte,gt,gte分别表示什么 lt:小于当前版本 lte:小于或等于当前版本,包括本身 gt:大于当前版本 gte:大于或等于当前版本,包括本身 使用格式 // 如IE9以下(不包括IE9加载此js) <!--[if lt IE 9]> <script src="http://api.html5media.info/1.1.8/html5media.min.js"></script> <![endif]--> // 其他条件注释

使用条件注释完成浏览器兼容

最近做的纯PC站需要兼容到IE8,一般使用css hack就能够完成,但如果兼容到IE7及以下就很头疼了,使用条件注释动态加载脚本是个不错的选择. 注释不同的浏览器版本 : (1).支持所有的IE浏览器(不包括IE10标准模式) <!--[if IE]>只有IE6,7,8,9浏览器显示(IE10标准模式不支持)<![endif]--> (2).所有非IE浏览器(不包括IE10标准模式) <!--[if !IE]><!-->只有非IE浏览器显示(不包括IE10

浏览器兼容处理(HTML条件注释、CSSHack和JS识别)

前面的话 本文中所有IEx+代表包含x及x以上:IEx-代表包含x及x以下,仅个人习惯.例:IE7+代表IE7.IE8…… 本文中所有例子全部经过测试,欢迎交流. HTML识别 条件注释法(IE10+已经不支持条件注释) [注意]两个--和左中括号[之间不能有空格,否则无效 [1]IE9-(<!--[if IE]><![endif]-->) <!DOCTYPE html> <html lang="en"> <head> <