hack速查表

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

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

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

测试环境:windows系统;

DOCTYPE:.

标志符 示例 IE6 IE7 IE8 IE9 FF OP SA CH
* .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
\0 .eq {color:#000\0;} N N Y Y N Y N N
\9 .eq {color:#000\9;} Y Y Y Y N N N N
\9\0 .eq {color:#000\0;} N N N\Y Y N N N N
:root .xx{xxx:xxx\9;} :root .eq {color:#a00\9;} 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-width:0px){} @media all and (min-width: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代表不支持。

注意事项:

推荐写法:

demo:

        .eq {
             color:#f00;/*标准浏览器*/
             color:#f30\0;/*IE8,IE9,opera*/
             *color:#c00;/*IE7及IE6*/
             _color:#600;/*IE6专属*/
            }
        :root .eq {color:#a00\9;}/*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专属*/