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