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”
ip{ 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總結
1.Firefox瀏覽器：
mozilla私有屬性
@-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*/
