zoukankan      html  css  js  c++  java
  • 谈谈IE条件注释

      在项目的开发过程当中,确实在IE的条件注释中碰到了有点儿坎儿,项目后又小小的看了一下,做个小总结吧。


      一、先了解一下它的用法(摘自:IE的条件注释

    1. 概述

      IE条件注释(简称condcom)是一种IE5.0版本以上特有的,允许程序员使用的一种特殊的指令。

    2.条件注释的各种类型

    <!--This is acomment-->

    3.IE条件注释

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

    4.相反的IE条件注释:

    <!--[if ! lt IE 7]>
     <![IGNORE[--><![IGNORE[]]>
      这里的代码与条件语句匹配
    <!--<![endif]-->

      简单来说,除了IE任何Windows平台的浏览器将条件注释解释成为普通的HTML注释。你不能够在CSS代码本身中使用条件注释。IE条件注释对隐藏或者显示给IE的代码非常的有用,他允许程序员使用流行的CSS “hacks”。

    5.IE特有的代码

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

      正如你所看到的,这是一段普通的HTML注释。所有的浏览器都会将以结束的语句解释成为注释。然而,IE却会看到[if IE]>这一段,它告诉IE解析下面的代码知道

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
        "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head><title>Test page</title></head>
     <body>
        <!–[if IE]>You are using Internet Explorer, 
            bad choice I’d say!<![endif]–>
     </body>
    </html>

      ......

      二、归类一下IE条件注释版本匹配的应用

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
    <!--[if IE]> 所有的IE可识别 <![endif]-->
    <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
    <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
    <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
    <!--[if IE 6]> 仅IE6可识别 <![endif]-->
    <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
    <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
    <!--[if IE 7]> 仅IE7可识别 <![endif]-->
    <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
    <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

      着重说一下第一个——反-IE注释

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
        "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head><title>Test page</title></head>
    <body>
        <!--[if !IE]>-->
            你正在使用一个好浏览器
        <!--<![endif]-->
    </body>
    </html>

      在除了IE之外的浏览器中,下面的话是可见的“你正在使用一个好浏览器”。在这个条件注释中我们使用了感叹号(!),叫做取反操作符,将布尔操作数取反。这种版本的反条件注释和微软的无效版本没有太大的不同,但是他确实很有效,虽然其他浏览器有较小的可能阻止它,并且工作的很好。

      重要的说明:要记住,对这种版本的反条件注释的任何修改,例如版本匹配或者比较操作将不能正常工作,或者在页面上输出”-->”。但是如果你想使用这样的功能,看我下面写的。

      反 IE条件注释

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
        "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head><title>Test page</title></head>
    <body>
        <!--[if !gt IE 6]><![IGNORE[--><![IGNORE[]]>
            Some will see and some will not!
        <!--<![endif]-->
    </body>
    </html>

      上面的代码对任何IE6以上的浏览器都会隐藏。要记住这种代码的最简单的方法就是看除了(!)号之外的if里面的表达语句。上面的例子是 gt IE 6,意味着在这段条件注释中的语句将对IE6以上的版本隐藏。
      当IE见到[if !gt IE 6]>,如果浏览器版本匹配(也就是说,浏览器不是IE6以上的版本),那么目前的标记会包含进页面里。它不会等待-->关闭这个注释。然而,在这种情况下,我们也希望让非IE浏览器包含进来。因此我们希望关闭注释。但是如果我们只是在[if !gt IE 6]>后面添加-->,IE会在页面上面输出-->。所以我们希望设置一些IGNORE标记,使得HTML标记的结束部分(-->)对IE是隐藏的。接着我们必须要关闭IGNORE部分,但是这样我们又会在其他的浏览器中遇到问题(关闭部分-->会显示在他们自己的页面中)。所以在-->之后(已经被IE忽略),我们为非IE浏览器设置一个新的IGNORE部分。然后我们关闭它,在所有的浏览器中都会关闭。非常的复杂,但是这是使它在IE和其他浏览器中工作的唯一办法。

      三、IE条件注释的新用法

     对于IE条件注释的用户想必做前端的网友都非常熟悉吧,一般我们都是采用下面的代码,以使用IE额外的样式表来解决IE的兼容性问题。虽然这个方案是目前比较常用的,但是存在2个缺点:

    <link rel="stylesheet" href="css/style.css" />
    <!--[if IE]><link rel="stylesheet" href="css/ie.css" /><![endif]-->
    <!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" /><![endif]-->

    1> 对IE浏览器用户会增加请求数量,影响访问速度;

    2> 一个元素的样式存放在几个地方,不便于维护,容易出错。

    所以大型网站都不会使用这个方案,要么一个通用样式表搞定,要么注释不会产生请求的内嵌样式表。

    那么还有更好的方法么?以下代码我是在 W3C HTML5 Loge 上发现的:

    <!--[if lt IE 7 ]> <html lang="en" class="ie6 ielt8"> <![endif]-->
    <!--[if IE 7 ]> <html lang="en" class="ie7 ielt8"> <![endif]-->
    <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
    <!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

    这样我们就可以 easy 的在 CSS 里写:.ie6 body { /* Go to Hell! */ }。

    然后 jQuery 里可以这么写:if ($('.ie6').length) { /* Go to Hell! */ }。

    很好很强大是吧?不妨来动手试试看吧!

      四、总结

      OK,就这么多吧。

      虽然没有自己的话,但是在项目的应用及解决对应问题的过程当中,也深刻的理解了一些,也对它的应用场景有了系统的认识。我想这样就OK了吧。

  • 相关阅读:
    Netweaver和CloudFoundry是如何运行Web应用的?
    5分钟部署一个Hello World Servlet到CloudFoundry
    Netweaver和CloudFoundry的服务器日志
    ABAP和Java的单元测试Unit Test
    在浏览器里使用SAPGUI
    从程序猿到SAP产品经理,我是如何转型的?
    Java实现 LeetCode 521 最长特殊序列 Ⅰ(出题人:“就是喜欢看你们不敢相信那么简单,又不敢提交的样子。”)
    Java实现 LeetCode 520 检测大写字母
    Java实现 LeetCode 520 检测大写字母
    Java实现 LeetCode 520 检测大写字母
  • 原文地址:https://www.cnblogs.com/jinguangguo/p/3083507.html
Copyright © 2011-2022 走看看