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專屬*/