使用hacker可以把瀏覽器分爲3類：IE6；IE7；其他（IE8
chrome ff safari opera等）
◆IE6認識的hacker是下劃線_和星號*
◆IE7認識的hacker是星號*
比如這樣一個CSS設置：
height:300px; *height:200px; _height:100px;
IE6瀏覽器在讀到height:300px的時候會認爲高時300px；繼續往下讀，他也認識*heihgt，
所以當IE6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認爲高度是200px。繼續往下讀，IE6還認識_height,所以他又會覆蓋掉200px高的設置，把高度設置爲100px；
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 |
|
標誌符 |
示例 |
IE6 |
IE7 |
IE8 |
IE9 |
FF |
OP |
SA |
CH |
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專屬*/