• 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

  • 相关阅读:
    浮起来的验证消息
    关于jQuery UI 使用心得及技巧
    如何制作好一个提交按扭我是个爱折腾的人
    ABAP自测试题一 沧海
    商务出现问题 沧海
    [转帖]Report painter 沧海
    准备ABAP认证 沧海
    Characteristics and Key figures In Report Painter 沧海
    有朋自远方来 沧海
    What are the layers of data description in R/3? 沧海
  • 原文地址:https://www.cnblogs.com/libinblog/p/4239227.html
Copyright © 2020-2023  润新知