CSS 的Hack 問題

一、什麼是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網頁特效，在微軟IE六、IE七、IE8瀏覽器有效果，但可能在火狐（Mozilla Firefox）谷歌瀏覽器無效，這樣就叫作JS hack ，因此咱們對於CSS來講他們來解決各瀏覽器對CSS解釋不一樣所採起的區別不一樣瀏覽器製做不一樣的CSS樣式的設置來解決這些問題就叫做CSS Hack。

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

二、CSS hack解決問題

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

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

從上圖能夠分析出如下幾種狀況：

1.大部分特殊字符IE瀏覽器支持，其餘主流瀏覽器firefox，chrome，opera，safari不支持 (opera可識別除外)。
2. \9    ：全部IE瀏覽器都支持
3._和-  ：僅IE6支持
4.*     ：IE六、E7支持
5.\0    ：IE八、IE9支持，opera部分支持
6.\9\0  ：IE8部分支持、IE9支持
7.\0\9  ：IE八、IE9支持

四、各類CSS hack狀況介紹

1.區別IE和非IE瀏覽器

#tip{ 
background:blue;/*非IE背景藍色  由於全部瀏覽器都能解釋*/ 
background:red\9;/*IE六、IE七、IE八、IE9背景紅色 由於\9在IE6.7.8.9中能夠識別，覆蓋上面樣式 IE10跟11應該不識別，IE11測試肯定*/ 
} 

2.區別IE6,IE7,IE8,FF

【區別符號】：「\9」、「*」、「_」

#tip{ 
background:blue;/*Firefox背景變藍色 全部瀏覽器都支持*/ 
background:red\9;/*IE8背景變紅色 IE六、七、八、9支持覆蓋上面樣式*/ 
*background:black;/*IE7背景變黑色 IE六、7支持又一次覆蓋上面樣式*/ 
_background:orange;/*IE6背景變橘色 緊IE6支持又一次覆蓋上面樣式*/ 
}  

【說明】：由於IE系列瀏覽器可讀「\9」，而IE6和IE7可讀「*」(米字號)，另外IE6可辨識「_」(底線)，所以能夠依照順序寫下來，就會讓瀏覽器正確的讀取到本身看得懂得CSS語法，因此就能夠有效區分IE各版本和非IE瀏覽器(像是Firefox、Opera、GoogleChrome、Safari等)。

3.區別IE六、IE七、Firefox(方法1)

【區別符號】：「*」、「_」

#tip{  
background:blue;/*Firefox背景變藍色*/  
*background:black;/*IE7背景變黑色*/  
_background:orange;/*IE6背景變橘色*/  
} 

【說明】：IE7和IE6可讀「*」(米字號)，IE6又能夠讀「_」(底線)，可是IE7卻沒法讀取「_」，至於Firefox(非IE瀏覽器)則徹底沒法辨識「*」和「_」，所以就能夠透過這樣的差別性來區分IE六、IE七、Firefox

4.區別IE六、IE七、Firefox(方法2)

【區別符號】：「*」、「!important」

#tip{  
background:blue;/*Firefox背景變藍色*/  
*background:green!important;/*IE7背景變綠色*/  
*background:orange;/*IE6背景變橘色*/  
} 

【說明】：IE7能夠辨識「*」和「!important」，可是IE6只能夠辨識「*」，卻沒法辨識「!important」，至於Firefox能夠讀取「!important」但不能辨識「*」所以能夠透過這樣的差別來有效區隔IE六、IE七、Firefox。

5.區別IE七、Firefox

【區別符號】：「*」、「!important」

#tip{  
background:blue;/*Firefox背景變藍色*/  
*background:green!important;/*IE7背景變綠色*/  
} 

【說明】：由於Firefox能夠辨識「!important」但卻沒法辨識「*」，而IE7則能夠同時看懂「*」、「!important」，所以能夠兩個辨識符號來區隔IE7和Firefox。

6.區別IE六、IE7(方法1)

【區別符號】：「*」、「_」

#tip{  
*background:black;/*IE7背景變黑色*/  
_background:orange;/*IE6背景變橘色*/  
} 

【說明】：IE7和IE6均可以辨識「*」(米字號)，但IE6能夠辨識「_」(底線)，IE7卻沒法辨識，透過IE7沒法讀取「_」的特性就能輕鬆區隔IE6和IE7之間的差別。

7.區別IE六、IE7(方法2)

【區別符號】：「!important」

#tip{  
background:black!important;/*IE7背景變黑色*/  
background:orange;/*IE6背景變橘色*/  
} 

【說明】：由於IE7可讀取「!important;」但IE6卻不行，而CSS的讀取步驟是從上到下，所以IE6讀取時因沒法辨識「!important」而直接跳到下一行讀取CSS，因此背景色會呈現橘色。

8.區別IE六、Firefox

【區別符號】：「_」

#tip{  
background:black;/*Firefox背景變黑色*/  
_background:orange;/*IE6背景變橘色*/  
} 

【說明】：由於IE6能夠辨識「_」(底線)，可是Firefox卻不行，所以能夠透過這樣的差別來區隔Firefox和IE6，有效達成CSShack。

五、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,因此不使用。

六、其餘主流瀏覽器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;}
}

七、兼容各大主流瀏覽器(最新版本)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*/

八、建議：實際開發先若是不是很清楚能夠先寫佈局代碼，寫一個階段用瀏覽器測試工具（經常使用工具推薦IETEST）測試一個各個版本瀏覽器的佈局效果，若有問題針對有問題的瀏覽器單獨調試。