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专属*/