CSS hack

本文原連接：https://blog.csdn.net/qq_31635733/article/details/81660897

CSS Hack是什麼意思？css hack有什麼用？ 

第一部分：什麼是CSS Hack？

CSS hack是經過在CSS樣式中加入一些特殊的符號，讓不一樣的瀏覽器識別不一樣的符號（什麼樣的瀏覽器識別什麼樣的符號是有標準的，CSS hack就是讓你記住這個標準），以達到應用不一樣的CSS樣式的目的。

例如：

一、margin屬性在ie6中顯示的距離會比其餘瀏覽器中顯示的距離寬2倍，也就是說margin-left:20px;在ie6中距左側對象的實際顯示距離是40px，而在非ie6中顯示的距左側對象的距離是設置的值20px;因此要想設置一個對象距離左側對象的距離在全部瀏覽器中都顯示是20px的寬度的樣式應爲：.kwstu{margin-left:20px;_margin-left:20px;}

二、kwstu{background:green;/*forfirefox*/width:300px;_width:200px;}，通常瀏覽器會先給元素使用width:300px;的樣式，緊接着後面還有個_width:200px;因爲下劃線_width只有IE6能夠識別，因此此樣式在IE6中實際設置對象的寬度爲200px，後面的把前面的給覆蓋了，而其餘瀏覽器不識別_width不會執行_width:200px;這句樣式，因此在其餘瀏覽器中設置對象的寬度就是300px。

三、好比要分辨IE6和firefox兩種瀏覽器，能夠這樣寫：

div { background:green;/*forfirefox*/ *background:red;/*forIE6*/(bothIE6&&IE7) }

我在IE6中看到是紅色的，在firefox中看到是綠色的。

如下是引自百度百科的定義：

1.  
   CSS hack因爲不一樣廠商的瀏覽器，好比Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不一樣版本，如IE6和IE7，對CSS的解析認識不徹底同樣，所以會致使生成的頁面效果不同，得不到咱們所須要的頁面效果。 這個時候咱們就須要針對不一樣的瀏覽器去寫不一樣的CSS，讓它可以同時兼容不一樣的瀏覽器，能在不一樣的瀏覽器中也能獲得咱們想要的頁面效果。
2.  
   簡單的說，CSS hack的目的就是使你的CSS代碼兼容不一樣的瀏覽器。固然，咱們也能夠反過來利用CSS hack爲不一樣版本的瀏覽器定製編寫不一樣的CSS效果。

注意： 咱們一般主要考慮的瀏覽器有IE六、IE七、IE8、谷歌瀏覽器（chrome）、火狐（Mozilla Firefox）便可，至於咱們經常使用的傲遊、QQ的TT瀏覽器是用你計算機中裝的系統自帶瀏覽器的內核，因此只須要兼容以上瀏覽器便可兼容TT傲遊瀏覽器。

CSS Hack常見的有三種形式：

CSS屬性Hack、CSS選擇符Hack以及IE條件註釋Hack， Hack主要針對IE瀏覽器。

一、屬性級Hack：好比IE6能識別下劃線「_」和星號「*」，IE7能識別星號「*」，但不能識別下劃線」_ 」，而firefox兩個都不能認識。

二、選擇符級Hack：好比IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。

三、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在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：

1.  
   background:orange;*background:green;_background:blue;
2.  
   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;} "爲例:

1.  
   #demo {width:100px;} /*被FIREFOX,IE6,IE7執行.*/
2.  
   * html #demo {width:120px;} /*會被IE6執行,以前的定義會被後來的覆蓋,因此#demo的寬度在IE6就爲120px; */
3.  
   *+ html #demo {width:130px;} /*會被IE7執行*/
4.  
   因此最後, #demo的寬度在三個瀏覽器的解釋爲: FIREFOX:100px; ie6:120px; ie7:130px;
5.  
   IE8 最新css hack：
6.  
   "9"　例 :"border:1px 9;".這裏的"9"能夠區別全部IE和FireFox.（只針對IE9 Hack）
7.  
   "0"　 IE8識別，IE六、IE7不能.
8.  
   "*"　 IE六、IE7能夠識別.IE八、FireFox不能.
9.  
   "_"　 IE6能夠識別"_",IE七、IE八、FireFox不能.

 IE6 hack

_background-color:#CDCDCD;/*ie6*/

 IE7 hack

1.  
   * background-color:#dddd00; /* ie 7*/IE8 hack
2.  
   background-color:red 0; /* ie 8/9*/IE9 hack
3.  
   background-color:blue 90;火狐，傲遊，瀏覽器通用
4.  
   background-color:red!important;

注意寫hack的順序，其中：

1.  
   background-color:red0;IE8和IE9都支持；
2.  
   background-color:blue90; 僅IE9支持；
3.  
   另外， background-color:eeeeee9;的HACK支持IE6-IE8，可是IE8不能識別「*」和「_」的CSS HACK。

可綜合上述規律靈活應用。

IE9 和 IE8 以及其餘版本的區別說明

1.  
   background- color:blue; 各個瀏覽器都認識，這裏給firefox用；
2.  
   background- color:red9;9全部的ie瀏覽器可識別；
3.  
   background- color:yellow0; 0 是留給ie8的，最新版opera也認識，後面自有hack寫了給opera認的，因此，0咱們就認爲是給ie8留的；
4.  
   +background- color:pink; + ie7定了；
5.  
   _background- color:orange; _專門留給神奇的ie6；
6.  
   :root #test { } :root是給ie9的，網上流傳了個版本是 :root #test { background-　color:purple0;}，這個，新版opera也認識，因此經筆者反覆驗證最終ie9特有的爲:root 選擇符 {屬性9;}
7.  
   @media all and (min-width:0px){ #test {} } 這個是總是跟ie搶着認0的神奇的opera，必須加個0,否則firefox，chrome，safari也都認識。。。
8.  
   @media screen and (-webkit-min-device-pixel-ratio:0){ #test {} }最後這個是瀏覽器新貴chrome和safari的。

選擇符級HackCSS內部選擇符級Hack語法

<hack> selector{ sRules }

說明選擇不一樣的瀏覽器及版本儘量減小對CSS Hack的使用。Hack有風險，使用需謹慎一般如未做特別說明，本文檔全部的代碼和示例的默認運行環境都爲標準模式。一些CSS Hack因爲瀏覽器存在交叉認識，因此須要經過層層覆蓋的方式來實現對不一樣瀏覽器進行Hack的。簡單列舉幾個：

1.  
   * html .test{color:#090;} /* For IE6 and earlier */
2.  
   * + html .test{color:#ff0;} /* For IE7 */
3.  
   .test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */
4.  
   .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

代碼以下: