建议：以标准浏览器为准书写代码，如遇到兼容问题，尝试其他方法解决问题，在万不得已怕情况下，采用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专属*/
时间： 2024-10-23 15:55:39