zoukankan      html  css  js  c++  java
  • IE 兼容性写法

    1. 条件注释语句

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
    <!--[if IE]> 所有的IE可识别 <![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]-->
    <!--[if IE 8]> 仅IE8可识别 <![endif]-->
    <!--[if IE 9]> 仅IE9可识别 <![endif]-->

    2. CSS hack 写法

    /* 所有浏览器 通用*/
    height: 100px;  
     
    /* IE6 专用 */
    _height: 100px;
     
    /* IE6 专用 */
    *height: 100px;  
     
    /* IE7 专用 */
    *+height: 100px;
     
    /* IE7、FF 共用 */
    height: 100px !important;
     
    /* IE6 7 8 9 10通用 */
     
    height: 100px9;

    (1)*:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;

    (2)!important: 除IE6不能识别 !important外,  FF+IE8+IE7都能识别!important ;

    (3)_ : 除IE6支持_ 外,  FF+IE8+IE7都不支持_;

    (4)9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)

    .test{ /* 1. */
            /* color:#09F; 以前是IE8/9, 现在10也支持 */
            color:#09F/; /* 以前是IE8 only, 现在IE9/10也支持. 如要排除IE9需要使用下面的rule重设IE9样式 */
    }
    @media all and (min-0) { /* 2. */
        .test{color:red9; }/* IE9 only, 现在IE10也支持 */
        /* Ps:老外的方法都是,根本没考虑Opera */
    }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* 3. */
       .test { color: green; } /* IE10+ */
    }
    :root .test { color:#9639; } /* 以前IE9 only, 现在10也支持, 优先级高于@media, 优先级太高, 尽量少用 */

    3. 识别IE10

    1) 特性检测:@cc_on

    我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack:该脚本里面的IE排除条件注释,以确保IE6-9不承认它,然后它功能检测到了名为@ cc_on。在这里:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    </head>
    <body>
    <!--[if !IE]><!--<script>  
    if (/*@cc_on!@*/false) {  
        document.documentElement.className+=' ie10';  
    }  
    </script><!--<![endif]-->
    </body>
    </html>

    用法

    .ie10 .example {  
       /* IE10-only styles go here */  
    }
    2)@media -ms-high-contrast

    IE10支持媒体查询,然后也支持-ms-high-contrast这个属性,所以,我们可以用它来hack ie10:

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
       /* IE10-specific styles go here */  
    }
    3) @media 0
    @media screen and (min-0) {  
        /* IE9 and IE10 rule sets go here */  
    }

    参考:

    http://feilong.org/ie7-ie8-ie6-firefox-css-hack

    http://www.fantxi.com/blog/archives/ie8-ie9-css-hack/

    http://www.wufangbo.com/ie10-css-hack/

  • 相关阅读:
    杭电 Problem
    杭电Problem 5053 the sum of cube 【数学公式】
    杭电 Problem 2089 不要62 【打表】
    杭电 Problem 4548 美素数【打表】
    杭电 Problem 2008 分拆素数和 【打表】
    杭电 Problem 1722 Cake 【gcd】
    杭电 Problem 2187 悼念512汶川大地震遇难同胞——老人是真饿了【贪心】
    杭电Problem 1872 稳定排序
    杭电 Problem 1753 大明A+B
    东北林业大 564 汉诺塔
  • 原文地址:https://www.cnblogs.com/cxp9876/p/3935675.html
Copyright © 2011-2022 走看看