原文：http://www.kwstu.com/Admin/ViewArticle/201409011604277330
CSS hack大全&詳解（什麼是CSS hack）

1、什麼是CSS hack?

CSS hack是通過在CSS樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號（什麼樣的瀏覽器識別什麼樣的符號是有標準的，CSS hack就是讓你記住這個標準），以達到應用不同的CSS樣式的目的，比如.kwstu{width:300px;_width:200px;}，一般瀏覽器會先給元素使用width:300px;的樣式，緊接著後面還有個_width:200px;由於下劃線_width只有IE6可以識別，所以此樣式在IE6中實際設定物件的寬度為200px，後面的把前面的給覆蓋了，而其他瀏覽器不識別_width不會執行_width:200px;這句樣式，所以在其他瀏覽器中設定物件的寬度就是300px;

以下是引自百度文庫的定義

簡單地講，css hack指各版本及各品牌瀏覽器之間對CSS解釋後出現網頁內容的誤差(比如我們常說錯位)的處理。由於各瀏覽器的核心不同，所以會造成一些誤差就像JS一樣，一個JS網頁特效，在微軟IE6、IE7、IE8瀏覽器有效果，但可能在火狐（Mozilla Firefox）谷歌瀏覽器無效，這樣就叫做JS hack ，所以我們對於CSS來說他們來解決各瀏覽器對CSS解釋不同所採取的區別不同瀏覽器製作不同的CSS樣式的設定來解決這些問題就叫作CSS Hack。

注意：我們通常主要考慮的瀏覽器有IE6、IE7、IE8、谷歌瀏覽器（chrome）、火狐（Mozilla Firefox）即可，至於我們常用的傲遊、QQ的TT瀏覽器是用你計算機中裝的系統自帶瀏覽器的核心，所以只需要相容以上瀏覽器即可相容TT\傲遊瀏覽器。

2、CSS hack解決問題

CSS hack用來解決有些css屬性在不同瀏覽器中顯示的效果不一樣的問題，如margin屬性在ie6中顯示的距離會比其他瀏覽器中顯示的距離寬2倍，也就是說margin-left:20px;在ie6中距左側物件的實際顯示距離是40px，而在非ie6中顯示的距左側物件的距離是設定的值20px;所以要想設定一個物件距離左側物件的距離在所有瀏覽器中都顯示是20px的寬度的樣式應為：.kwstu{margin-left:20px;_margin-left:20px;}。

3、瀏覽器識別字符標準對應表

從上圖可以分析出以下幾種情況：

1.大部分特殊字元IE瀏覽器支援，其他主流瀏覽器firefox，chrome，opera，safari不支援 (opera可識別除外)。
2.\9    ：所有IE瀏覽器都支援
3._和-  ：僅IE6支援
4.*     ：IE6、E7支援
5.\0    ：IE8、IE9支援，opera部分支援
6.\9\0  ：IE8部分支援、IE9支援
7.\0\9  ：IE8、IE9支援 4、各種CSS hack情況介紹 1.區別IE和非IE瀏覽器 #tip{ 
background:blue;/*非IE背景藍色  因為所有瀏覽器都能解釋*/ 
background:red\9;/*IE6、IE7、IE8、IE9背景紅色 因為\9在IE6.7.8.9中可以識別，覆蓋上面樣式 IE10跟11應該不識別，IE11測試確定*/ 
}  2.區別IE6,IE7,IE8,FF

【區別符號】：“\9”、“*”、“_”

#tip{ 
background:blue;/*Firefox背景變藍色 所有瀏覽器都支援*/ 
background:red\9;/*IE8背景變紅色 IE6、7、8、9支援覆蓋上面樣式*/ 
*background:black;/*IE7背景變黑色 IE6、7支援又一次覆蓋上面樣式*/ 
_background:orange;/*IE6背景變橘色 緊IE6支援又一次覆蓋上面樣式*/ 
}   【說明】：因為IE系列瀏覽器可讀「\9」，而IE6和IE7可讀「*」(米字號)，另外IE6可辨識「_」(底線)，因此可以依照順序寫下來，就會讓瀏覽器正確的讀取到自己看得懂得CSS語法，所以就可以有效區分IE各版本和非IE瀏覽器(像是Firefox、Opera、GoogleChrome、Safari等)。 3.區別IE6、IE7、Firefox(方法1)

【區別符號】：“*”、“_”

#tip{  
background:blue;/*Firefox背景變藍色*/  
*background:black;/*IE7背景變黑色*/  
_background:orange;/*IE6背景變橘色*/  
}  【說明】：IE7和IE6可讀「*」(米字號)，IE6又可以讀「_」(底線)，但是IE7卻無法讀取「_」，至於Firefox(非IE瀏覽器)則完全無法辨識「*」和「_」，因此就可以透過這樣的差異性來區分IE6、IE7、Firefox 4.區別IE6、IE7、Firefox(方法2)

【區別符號】：“*”、“!important”

#tip{  
background:blue;/*Firefox背景變藍色*/  
*background:green!important;/*IE7背景變綠色*/  
*background:orange;/*IE6背景變橘色*/  
}  【說明】：IE7可以辨識「*」和「!important」，但是IE6只可以辨識「*」，卻無法辨識「!important」，至於Firefox可以讀取「!important」但不能辨識「*」因此可以透過這樣的差異來有效區隔IE6、IE7、Firefox。 5.區別IE7、Firefox

【區別符號】：“*”、“!important”

#tip{  
background:blue;/*Firefox背景變藍色*/  
*background:green!important;/*IE7背景變綠色*/  
}  【說明】：因為Firefox可以辨識「!important」但卻無法辨識「*」，而IE7則可以同時看懂「*」、「!important」，因此可以兩個辨識符號來區隔IE7和Firefox。 6.區別IE6、IE7(方法1)

【區別符號】：“*”、“_”

#tip{  
*background:black;/*IE7背景變黑色*/  
_background:orange;/*IE6背景變橘色*/  
}  【說明】：IE7和IE6都可以辨識「*」(米字號)，但IE6可以辨識「_」(底線)，IE7卻無法辨識，透過IE7無法讀取「_」的特性就能輕鬆區隔IE6和IE7之間的差異。 7.區別IE6、IE7(方法2)

【區別符號】：“!important”

#tip{  
background:black!important;/*IE7背景變黑色*/  
background:orange;/*IE6背景變橘色*/  
}  【說明】：因為IE7可讀取「!important;」但IE6卻不行，而CSS的讀取步驟是從上到下，因此IE6讀取時因無法辨識「!important」而直接跳到下一行讀取CSS，所以背景色會呈現橘色。 8.區別IE6、Firefox

【區別符號】：“_”

#tip{  
background:black;/*Firefox背景變黑色*/  
_background:orange;/*IE6背景變橘色*/  
}  【說明】：因為IE6可以辨識「_」(底線)，但是Firefox卻不行，因此可以透過這樣的差異來區隔Firefox和IE6，有效達成CSShack。 5、IE瀏覽器下hack總結 element{
color：#666\9； //IE8 IE9
* color：#999；   //IE7
_color:#EBEBEB； //IE6
}

可以看出，利用字元識別無法區分IE8和IE9，我們可以從偽類的識別來區分

element{
color：#666\9；      //IE8
* color：#999；        //IE7
_color:#EBEBEB；      //IE6
}
:root element{color：#666\9;}//IE9 【說明】：“:root”偽類IE系列只有IE9支援，其他主流瀏覽器均支援，利用這一點來區分IE8和IE9。另外考慮到opera部分支援，完全支援:root,所以不使用。 6、其他主流瀏覽器css hack總結

@-moz-document url-prefix(){ .element{color:#f1f1f1;}} //Firefox

2.Webkit和Opera: @media all and (min-width: 0px){ .element{color:#777;} }
//Webkit
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.element{color:#444;}
}
//Opera
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.element{color:#336699;}
} 7、相容各大主流瀏覽器(最新版本)css hack彙總如下（最全的）： .element{
color:#000;             /*w3c標準*/
[;color:#f00;];         /*Webkit(chrome和safari)*/
color:#666\9;           /*IE8*/
*color:#999;            /*IE7*/
_color:#333;            /*IE6*/
}
:root .element{color:#0f0\9;}  /*IE9*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (
-webkit-min-device-pixel-ratio:0) { .element{color:#336699;}}  /*opera*/
@-moz-document url-prefix(){ .element{color:#f1f1f1;}} /*Firefox*/ 8、建議：實際開發先如果不是很清楚可以先寫佈局程式碼，寫一個階段用瀏覽器測試工具（常用工具推薦IETEST）測試一個各個版本瀏覽器的佈局效果，如有問題針對有問題的瀏覽器單獨除錯。