css中hack是什么
一、總結
1、CSS hack：由於不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
2、hack：本意：修改，引申為對軟件的二次修改 css hack的意思是瀏覽器兼容
3、hack實例： 1、屬性級Hack：比如IE6能識別下划線“_”和星號“*”，IE7能識別星號“*”，但不能識別下划線”_ ”，而firefox兩個都不能認識。
二、hack是什么
由於不同的瀏覽器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
這個針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack,也叫寫CSS hack。
Hack，顧名思義是修改的意思。 這次普通的詞匯在IT上得到了很廣泛的應用： 1、針對Discuz!系統，Dvbbs系統等論壇軟件的二次修改。 Hack是基於開源的程序的基礎，對其代碼進行增加、刪除或者修改、優化，使之在功能上符合新的需求。 目前，Hack大多和插件混為一談，其實二者是有很大區別的：插件一般是利用程序的API（接口），復用程序底層，利用一些程序既有的函數和類制作新的小作品，一般有文件的增加，且符合標准的插件，其目錄結構和文件名都是有一定格式的（如Discuz!的插件文件需放在plugin目錄下）。而Hack則是針對原程序文件的直接修改，在格式上也自然沒有太嚴格的規定，且一般沒有文件的增加。 由於基礎是開源免費的，一般的Hack也都是開源免費的，許多程序愛好者會根據自己或者朋友的需求，去制作一些小Hack在各個程序的官方交流論壇發布（比如動網的hack就會發布在動網的交流論壇的插件區），以獲得站長們和官方的肯定和鼓勵。
三、那么在HTML中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由於不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。 簡單的說，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。注意： 我們通常主要考慮的瀏覽器有IE6、IE7、IE8、谷歌瀏覽器（chrome）、火狐（Mozilla Firefox）即可，至於我們常用的傲游、QQ的TT瀏覽器是用你計算機中裝的系統自帶瀏覽器的內核，所以只需要兼容以上瀏覽器即可兼容TT傲游瀏覽器。
CSS Hack常見的有三種形式：
CSS屬性Hack、CSS選擇符Hack以及IE條件注釋Hack， Hack主要針對IE瀏覽器。
1、屬性級Hack：比如IE6能識別下划線“_”和星號“*”，IE7能識別星號“*”，但不能識別下划線”_ ”，而firefox兩個都不能認識。
2、選擇符級Hack：比如IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
CSS<wbr>Hack技術介紹及常用的Hack技巧集錦
3、IE條件注釋Hack：IE條件注釋是微軟IE5開始就提供的一種非標准邏輯語句。比如針對所有IE：<!-[if IE]><!-您的代碼-><![endif]>，針對IE6及以下版本：<!-[if it IE 7]><!-您的代碼-><![endif]->，這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。
PS：條件注釋只有在IE瀏覽器下才能執行，這個代碼在非IE瀏覽下被當做注釋視而不見。可以通過IE條件注釋載入不同的CSS、JS、HTML和服務器代碼等。
二、CSS hack的實際應用
CSS hack用來解決有些css屬性在不同瀏覽器中顯示的效果不一樣的問題，如margin屬性在ie6中顯示的距離會比其他瀏覽器中顯示的距離寬2倍，也就是說margin-left:20px;在ie6中距左側對象的實際顯示距離是40px，而在非ie6中顯示的距左側對象的距離是設置的值20px;所以要想設置一個對象距離左側對象的距離在所有瀏覽器中都顯示是20px的寬度的樣式應為：.kwstu{margin-left:20px;_margin-left:20px;}。比如要分辨IE6和firefox兩種瀏覽器，可以這樣寫：
div{
background:green;/*forfirefox*/ *background:red;/*forIE6*/(bothIE6&&IE7) }我在IE6中看到是紅色的，在firefox中看到是綠色的。
解釋一下：上面的css在firefox中，它是認識不了后面的那個帶星號的東西是什么的，於是將它過濾掉，不予理睬，解析得到的結果是:div{background:green} ,於是理所當然這個div的背景是綠色的。在IE6中呢，它兩個background都能識別出來，它解析得到的結果是:div{background:green;*background:red;} ,於是根據優先級別，處在后面的red的優先級高，於是當然這個div的背景顏色就是紅色的了。CSS hack:區分IE6，IE7，firefox區別不同瀏覽器，CSS hack寫法：
區別IE6與FF：
background:orange;*background:blue;區別IE6與IE7：
background:green!important;background:blue;區別IE7與FF：
background:orange;*background:green;區別FF，IE7，IE6：
background:orange;*background:green;_background:blue; background:orange;*background:green!important;*background:blue;注：IE都能識別*;標准瀏覽器(如FF)不能識別*；IE6能識別*；不能識別 !important ;IE7能識別*，能識別!important;FF不能識別*，但能識別!important;
瀏覽器優先級別:
FF<IE7<IE6,CSS hack書寫順序一般為FF IE7 IE6
以: " #demo {width:100px;} "為例:
#demo {width:100px;} /*被FIREFOX,IE6,IE7執行.*/ * html #demo {width:120px;} /*會被IE6執行,之前的定義會被后來的覆蓋,所以#demo的寬度在IE6就為120px; */ *+html #demo {width:130px;} /*會被IE7執行*/ 所以最后,#demo的寬度在三個瀏覽器的解釋為: FIREFOX:100px; ie6:120px; ie7:130px; IE8 最新css hack： "9" 例:"border:1px 9;".這里的"9"可以區別所有IE和FireFox.（只針對IE9 Hack） "0" IE8識別，IE6、IE7不能. "*" IE6、IE7可以識別.IE8、FireFox不能. "_" IE6可以識別"_",IE7、IE8、FireFox不能.IE6 hack
_background-color:#CDCDCD;/*ie6*/IE7 hack
*background-color:#dddd00; /* ie 7*/IE8 hack background-color:red 0; /* ie 8/9*/IE9 hack background-color:blue 90;火狐，傲游，瀏覽器通用 background-color:red!important;注意寫hack的順序，其中：
background-color:red0;IE8和IE9都支持； background-color:blue90; 僅IE9支持； 另外，background-color:eeeeee9;的HACK支持IE6-IE8，但是IE8不能識別“*”和“_”的CSS HACK。可綜合上述規律靈活應用。
IE9 和 IE8 以及其他版本的區別說明
background-color:blue; 各個瀏覽器都認識，這里給firefox用； background-color:red9;9所有的ie瀏覽器可識別； background-color:yellow0; 0 是留給ie8的，最新版opera也認識，后面自有hack寫了給opera認的，所以，0我們就認為是給ie8留的； +background-color:pink; + ie7定了； _background-color:orange; _專門留給神奇的ie6； :root #test { background-color:purple9; } :root是給ie9的，網上流傳了個版本是 :root #test { background- color:purple0;}，這個，新版opera也認識，所以經筆者反復驗證最終ie9特有的為:root 選擇符 {屬性9;} @media all and (min-width:0px){ #test {background-color:black0;} } 這個是老是跟ie搶着認0的神奇的opera，必須加個0,不然firefox，chrome，safari也都認識。。。 @media screen and (-webkit-min-device-pixel-ratio:0){ #test {} }最后這個是瀏覽器新貴chrome和safari的。選擇符級HackCSS內部選擇符級Hack語法
<hack> selector{ sRules }說明選擇不同的瀏覽器及版本盡可能減少對CSS Hack的使用。Hack有風險，使用需謹慎通常如未作特別說明，本文檔所有的代碼和示例的默認運行環境都為標准模式。一些CSS Hack由於瀏覽器存在交叉認識，所以需要通過層層覆蓋的方式來實現對不同瀏覽器進行Hack的。簡單列舉幾個：
* html .test{color:#090;} /* For IE6 and earlier */ * + html .test{color:#ff0;} /* For IE7 */ .test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */ .test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */內部屬性HackCSS內部屬性級Hack語法：
selector{<hack>?property:value<hack>?;}取值：
注意： 不管是什么方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面。補充：IE6能識別* ，但不能識別 !important,IE7能識別 *，也能識別!important;FF不能識別 *，但能識別!important;下划線” _ “,IE6支持下划線，IE7和firefox均不支持下划線。
三、為什么不推薦不推薦使用CSS hack來解決兼容性問題
CSS hack是因為現有瀏覽器對標准的解析不同，為了兼容各瀏覽器，所采用的一種補救方法。CSS hack是一種類似作弊的手段，以欺騙瀏覽器的方式達到兼容的目的，是用瀏覽器的兼容性差異來解決瀏覽器的兼容性問題。因此，在設計之初，寫CSS hack需要遵循以下三條原則：
- 有效： 能夠通過 Web 標准的驗證
- 只針對太古老的/不再開發的/已被拋棄的瀏覽器， 而不是目前的主流瀏覽器
- 代碼要丑陋。讓人記住這是一個不得已而為之的 Hack, 時刻記住要想辦法去掉它。現在很多hacks已經拋棄了最初的原則，而濫用hack會導致瀏覽器更新之后產生更多的兼容性問題。因此，並不推薦使用CSS hack來解決兼容性問題。
常用的CSS Hack
代碼如下:
