码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-01-30 15:43:17      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

条件注释判断浏览器在实际中经常使用,比如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

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

标签:

原文地址:http://www.cnblogs.com/libinblog/p/4239227.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!