CSS Hack技術的總結

1、什麼是CSS hack?

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

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

2. CSS hack方式

l 方式一、 條件註釋法

Ø 只在IE下生效

<!--[if IE]>

這段文字只在IE瀏覽器顯示

<![endif]-->

Ø 只在IE6下生效

<!--[if IE 6]>

這段文字只在IE6瀏覽器顯示

<![endif]-->

Ø 只在IE6以上版本生效

<!--[if gte IE 6]>  

這段文字只在IE6以上(包括)版本IE瀏覽器顯示

<![endif]-->

Ø 只在IE8上不生效

<!--[if ! IE 8]>

這段文字在非IE8瀏覽器顯示

<![endif]-->

Ø 非IE瀏覽器生效

<!--[if !IE]>

這段文字只在非IE瀏覽器顯示

<![endif]-->

示例：

<!--[if IE 6]>

<link rel="stylesheet" type="text/css" href="css/ie6.css" />

<![endif]-->

<!--[if IE 7]>

<link rel="stylesheet" type="text/css" href="css/ie7.css" />

<![endif]-->

方式二、 選擇器前綴法

選擇器前綴法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。

l 方式三、 屬性前綴法

Ø 瀏覽器識別字符標準對應表(1)

 

Ø 3、瀏覽器識別字符標準對應表(2)

 

由上面可以看出來：

1.  大部分特殊字符IE瀏覽器支持，其他主流瀏覽器firefox，chrome，opera，safari不支持 (opera可識別除外)。 2.  _和-  ：僅IE5、IE6支持3.  *   ：IE6、E7支持

4.  \9   ：所有IE瀏覽器都支持5.  \0   ：IE8、IE9支持，opera部分支持6.  \9\0 ：IE8部分支持、IE9支持7.  \0\9 ：IE8、IE9支持

 

3、各種常用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:red;/*IE7背景變黑色*/ 
*background:black;/*IE6、7背景變黑色*/  
_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。

 

9.兼容各大主流瀏覽器(最新版本)css hack彙總如下（最全的）：

.element{
color:#000;             /*w3c標準*/
[;color:#f00;];         /*Webkit(chrome和safari)*/
color:#666\9;          /*IE6+*/
*color:#999;           /*IE6、7*/
_color:#333;            /*IE5、6*/

+color:#333;            /*IE7*/

color:#333\0;            /*IE8、9*/
}
: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*/

4. 使用X-UA-Compatible來設置IE瀏覽器兼容模式

1. 強制IE8使用IE7模式來解析

<meta http-equiv="X-UA-Compatible" content="IE=8″>
2. Google Chrome Frame也可以讓IE用上Chrome的引擎:

<meta http-equiv="X-UA-Compatible" content="chrome=1″ />
3.強制IE8使用IE7模式來解析

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"><!– IE7 mode –>
//或者
<meta http-equiv="X-UA-Compatible" content="IE=7"><!– IE7 mode –>
4.強制IE8使用IE6或IE5模式來解析

<meta http-equiv="X-UA-Compatible" content="IE=6″><!– IE6 mode –>

<meta http-equiv="X-UA-Compatible" content="IE=5″><!– IE5 mode –>
5.如果一個特定版本的IE支持所要求的兼容性模式多於一種，如

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8″ />