CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器，那么你對css hack了解多少呢?下面就讓學習啦小編來給你科普一下什么是css hack。

css hack的原理

由于不同的瀏覽器對CSS的支持及解析結果不一樣，還由于CSS中的優先級的關系。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。

CSS Hack大致有3種表現形式，CSS類內部Hack、選擇器Hack以及HTML頭部引用(if IE)Hack，CSS Hack主要針對類內部Hack：比如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，而firefox兩個都不能認識。等等

選擇器Hack：比如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。等等

HTML頭部引用(if IE)Hack：針對所有IE：，針對IE6及以下版本：，這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。

書寫順序，一般是將識別能力強的瀏覽器的CSS寫在后面。下面如何寫里面說得更詳細些。

常用的CSS hack方式

(1)方式一 條件注釋法

只在IE下生效

只在IE6下生效

只在IE6以上版本生效

只在IE8上不生效

非IE瀏覽器生效

(2)方式二 類內屬性前綴法

屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達到預期的頁面展現效果。

css hack的實際應用

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 \9\0;火狐，傲游，瀏覽器通用

background-color:red!important;

注意寫hack的順序，其中：

background-color:red\0;IE8和IE9都支持;

background-color:blue\9\0; 僅IE9支持;

另外，background-color:eeeeee\9;的HACK支持IE6-IE8，但是IE8不能識別“*”和“_”的CSS HACK。

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

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

background-color:blue; 各個瀏覽器都認識，這里給firefox用;

background-color:red\9;\9所有的ie瀏覽器可識別;

background-color:yellow\0; \0 是留給ie8的，最新版opera也認識，后面自有hack寫了給opera認的，所以，\0我們就認為是給ie8留的;

+background-color:pink; + ie7定了;

_background-color:orange; _專門留給神奇的ie6;

:root #test { background-color:purple\9; } :root是給ie9的，網上流傳了個版本是 :root #test { background-　color:purple\0;}，這個，新版opera也認識，所以經筆者反復驗證最終ie9特有的為:root 選擇符 {屬性\9;}

@media all and (min-width:0px){ #test {background-color:black\0;} } 這個是老是跟ie搶著認\0的神奇的opera，必須加個\0,不然firefox，chrome，safari也都認識。。。

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后這個是瀏覽器新貴chrome和safari的。

選擇符級Hack

CSS內部選擇符級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 */

內部屬性Hack

CSS內部屬性級Hack

語法：selector{?property:value?;}

取值：

_： 選擇IE6及以下。連接線(中劃線)(-)亦可使用，為了避免與某些帶中劃線的屬性混淆，所以使用下劃線(_)更為合適。

*：選擇IE7及以下。諸如：(+)與(#)之類的均可使用，不過業界對(*)的認知度更高。

\9：選擇IE6+。

\0：選擇IE8+和Opera。

[;property:value;]; 選擇webkit核心瀏覽器(Chrome,Safari)。IE7及以下也能識別。中括號內外的3個分號必須保留，第一個分號前可以是任意規則或任意多個規則。 [;color:#f00;]; 與 [color:#f00;color:#f00;]; 與 [margin:0;padding:0;color:#f00;]; 是等價的。生效的始終是中括號內的最后一條規則，所以通常選用第一種寫法最為簡潔。

說明：一些CSS Hack由于瀏覽器存在交叉認識，所以需要通過層層覆蓋的方式來實現對不同瀏覽器進行Hack的。如下面這個例子：如想同一段文字在IE6,7,8，chrome，safari，顯示為不同顏色，可這樣寫：

.test{

color:#000; /* 正常寫法普遍支持 */

color:#00F\9; /* 所有IE瀏覽器(ie6+)支持 */

/*但是IE8不能識別“ * ”和“ _ ” */

[color:#000;color:#0F0; /* SF,CH支持 */

color:#00F\0; /* IE8支持*/

*color:#FF0; /* IE7支持 */

_color:#F00; /* IE6支持 */

}

注意了：不管是什么方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面。

看過“css hack怎么應用”的人還看了：

總結

以上是生活随笔為你收集整理的css hack方法,css hack怎么应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。