hack速查表

文章目錄

• demo:

建議：以標準瀏覽器為準書寫代碼，如遇到相容問題，嘗試其他方法解決問題，在萬不得已怕情況下，採用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專屬*/