zoukankan      html  css  js  c++  java
  • hack速查表

    建议:以标准浏览器为准书写代码,如遇到兼容问题,尝试其他方法解决问题,在万不得已怕情况下,采用HACK解决。

    以下是我总结的HACK书写方法:

    浏览器:仅限IE6+,FF,safari,chrome,opera;(截止到2011.10.12非IE均为最新版本)。

    测试环境:windows系统;

    DOCTYPE:.

    标志符示例IE6IE7IE8IE9FFOPSACH
    * .eq {*color:#000;} Y Y N N N N N N
    _ .eq {_color:#000;} Y N N N N N N N
    + .eq {+color:#000;} Y Y N N N N N N
    - .eq {-color:#000;} Y N N N N N N N
    > .eq {>color:#000;} Y Y N N N N N N
    .eq {color:#000;} N N Y Y N Y N N
    9 .eq {color:#0009;} Y Y Y Y N N N N
    9 .eq {color:#000;} N N NY Y N N N N
    :root .xx{xxx:xxx9;} :root .eq {color:#a009;} N N N Y N N N N
    *+ .eq {*+color:#000;} Y Y N N N N N N
    *- .eq {*-color:#000;} Y N N N N N N N
    *html *html .eq {color:#000;} Y N N N N N N N
    *+html *+html .eq {color:#000;} N Y N N N N N N
    html* html* .eq {color:#000;} Y Y N N N N N N
    [; .eq {color:red;[;color:blue;} Y Y N N N N Y Y
    html>body html>body .eq {color:blue;} N Y Y Y Y Y Y Y
    html>/**/body html>/**/body .eq {color:blue;} N N Y Y Y Y Y Y
    html/**/>body html/**/>body .eq {color:blue;} N Y Y Y Y Y Y Y
    @media all and (min-0px){} @media all and (min-0px){.eq {color:#000;}} N N N Y Y Y Y Y
    *:first-child+html *:first-child+html .eq {color:blue;} N Y N N N N N N
    *:first-child+html{} *html *:first-child+html{} *html .eq {color:blue;} Y N N N N N N N
    @-moz-document url-prefix(){} @-moz-document url-prefix(){ .eq {color:blue;}} N N N N Y N N N
    @media screen and (-webkit-min-device-pixel-ratio:0){} @media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}} N N N N N N Y Y
    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){} @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}} N N N N N Y N N
    body:nth-of-type(1) body:nth-of-type(1) .eq {color:blue;} N N N Y Y Y Y Y

    FF:firefox; OP:opera; SA:safari; CH:chrome; Y代表支持,N代表不支持。

    注意事项:

    • ·
      由于各浏览器更新神速,所以有些HACK可能会有变化,所以请大家注意。
    • ·
      [;此种方式会影响后续样式,不可取。
    • ·
      9并非对所有属性都能区分IE8和IE9.比如:background-color可以,但background不可以,还有border也不可以。所以在实际用时要测试下。
    • ·
      当同时出现;*;_;时,推荐将写在*和_前面。例如:color:red;*color:blue;_color:green;可行,否则IE7和IE6里的效果会失效。但border例外,放在前后都可以。保险起见,还是放在前面。

    推荐写法:

    demo:

            .eq {
                 color:#f00;/*标准浏览器*/
                 color:#f30;/*IE8,IE9,opera*/
                 *color:#c00;/*IE7及IE6*/
                 _color:#600;/*IE6专属*/
                }
            :root .eq {color:#a009;}/*IE9专属*/
            @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:#450;}}/*opera专属*/
            @media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:#879;}}/*webkit专属*/
            @-moz-document url-prefix(){ .eq {color:#4dd;}}/*firefox专属*/
  • 相关阅读:
    面向对象的思维
    343. 整数拆分
    413. 等差数列划分
    303. 区域和检索
    62. 不同路径
    char类型与int类型相加
    mybatis里面resultmap的问题
    easyui的datagrid如何获取一个对象里面的成员对象里面的属性?
    ==和equls的区别
    泛型的使用思想
  • 原文地址:https://www.cnblogs.com/eaysun/p/4109444.html
Copyright © 2011-2022 走看看