css hack

CSS hack由於不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是


同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果


不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它


能夠同時相容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
簡單的說，CSS hack的目的就是使你的CSS程式碼相容不同的瀏覽器。當然，我們也可以反過來利用CSS 


hack為不同版本的瀏覽器定製編寫不同的CSS效果。
外文名 CSS hack 例    如 Internet Explorer 6 對    象瀏覽器 性    質 程式設計 原    理 CSS中的


優先順序的關係
目錄
1 原理
2 常用的CSS hack方式
3 實際應用
▪ IE6 hack
▪ IE7 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：<!--[if IE]><!--您的程式碼--><![endif]-->，針對IE6及以下


版本：<!--[if lt IE 7]><!--您的程式碼--><![endif]-->，這類Hack不僅對CSS生效，對寫在判斷語句裡


面的所有程式碼都會生效。
書寫順序，一般是將識別能力強的瀏覽器的CSS寫在後面。下面如何寫裡面說得更詳細些。
常用的CSS hack方式
（1）方式一 條件註釋法
只在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]-->
（2）方式二 類內屬性字首法
屬性字首法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack字首，以達到預期的頁面展現


效果。
IE瀏覽器各版本 CSS hack 對照表
hack
寫法
例項
IE6(S)
IE6(Q)
IE7(S)
IE7(Q)
IE8(S)
IE8(Q)
IE9(S)
IE9(Q)
IE10(S)
IE10(Q)
*
*color
青色
Y
Y
Y
Y
N
Y
N
Y
N
Y
+
+color
綠色
Y
Y
Y
Y
N
Y
N
Y
N
Y
-
-color
黃色
Y
Y
N
N
N
N
N
N
N
N
_
_color
藍色
Y
Y
N
Y
N
Y
N
Y
N
N
#
#color
紫色
Y
Y
Y
Y
N
Y
N
Y
N
Y
\0
color:red\0
紅色
N
N
N
N
Y
N
Y
N
Y
N
\9\0
color:red\9\0
粉色
N
N
N
N
N
N
Y
N
Y
N
!important
color:blue !important;color:green;
棕色
N
N
Y
N
Y
N
Y
N
Y
Y
說明：在標準模式中
“-″減號是IE6專有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只對IE9/IE10生效，是IE9/10的hack
（3）CSS hack方式三：選擇器字首法
選擇器字首法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些


特定瀏覽器才能識別的字首進行hack。
目前最常見的是
*html *字首只對IE6生效*+html *+字首只對IE7生效@media screen\9{...}只對IE6/7生效@media 


\0screen {body { background: red; }}只對IE8有效@media \0screen\,screen\9{body { background: 


blue; }}只對IE6/7/8有效@media screen\0 {body { background: green; }} 只對IE8/9/10有效@media 


screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效@media screen and (-


ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對


IE10有效等等
實際應用
比如要分辨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：
1
background:orange;*background:blue;
區別IE6與IE7：
1
background:green!important;background:blue;
區別IE7與FF：
1
background:orange;*background:green;
區別FF，IE7，IE6：
1
2
background:orange;*background:green;_background:blue;
background:orange;*background:green!important;*background:blue;
注：IE都能識別*;標準瀏覽器(如FF)不能識別*；
IE6能識別*；不能識別 !important;
IE7能識別*，能識別!important;
FF不能識別*，但能識別!important;


　　IE6 IE7FireFox
*√√×
!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
1
_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
語法
<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{<hack>?property:value<hack>?;}
取值：
_： 選擇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，顯示為不同顏色，可這樣寫


[1]  ：
.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支援 */
}
注意了：[1]  不管是什麼方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後


面。
補充：IE6能識別 *，但不能識別 !important,IE7能識別 *，也能識別!important;FF不能識別 *，但能


識別!important;下劃線”_“,IE6支援下劃線，IE7和firefox均不支援下劃線[1]  。
參考資料
========

CSS各個瀏覽器Hack的寫法

http://www.cnblogs.com/xujanus/p/5653964.html
Hack是針對不同的瀏覽器去寫不同的CSS樣式，從而讓各瀏覽器能達到一致的渲染效果，那麼針對不同的


瀏覽器寫不同的CSS CODE的過程，就叫CSS HACK，同時也叫寫CSS Hack。然後將Hack放在瀏覽器特定的


CSS檔案中，讓其符合條件的瀏覽器解析這些程式碼，就如前面所說的條件樣式，我們將CSS Hack程式碼放入


條件樣式檔案中，符合條件的瀏覽器就解析，不符合的將不解析，從面達到您所需要的頁面渲染效果。


總的一句話來說使用CSS Hack將會使用你的CSS程式碼部分失去作用，然後藉助條件樣式，使用其原CSS代


碼在一些瀏覽器解析，而CSS Hack程式碼在符合條件要求的瀏覽器中替代原CSS那部分程式碼。常見的就是在


IE6下使用，不具體說，我想大家都有碰到過了。下面我們就一起來看看所有瀏覽器都具有什麼Hack，換


句話說，各種瀏覽器都能識別哪些CSS的寫法。


下面是我收集有關於各瀏覽器下Hack的寫法


1、Firefox


@-moz-document url-prefix() { .selector { property: value; } }
上面是僅僅被Firefox瀏覽器識別的寫法，具體如：


@-moz-document url-prefix() { .demo { color:lime; } }
支援Firefox的還有幾種寫法：


/* 支援所有firefox版本 */ #selector[id=selector] { property: value; } 或者： @-moz-document 


url-prefix() { .selector { property: value; } } /* 支援所有Gecko核心的瀏覽器 (包括Firefox) 


*/ *>.selector { property: value; }
2、Webkit枘核瀏覽器(chrome and safari)


@media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }
上面寫法主要是針對Webkit核心的瀏覽器，如Google Chrome 和 Safari瀏覽器：


@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }
3、Opera瀏覽器


html:first-child>body Selector {property:value;} 或者： @media all and (min-width:0) { 


Selector {property: value;} } 或者： @media all and (-webkit-min-device-pixel-ratio:10000), 


not all and (-webkit-min-device-pixel-ratio:0) { head~body Selector { property: value; } }
上面則是Opera瀏覽器的Hack寫法：


@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-


pixel-ratio:0) { head~body .demo { background: green; } }
4、IE9瀏覽器


:root Selector {property: value9;}
上面是IE9的寫法，具體應用如下：


:root .demo {color: #ff09;}
5、IE9以及IE9以下版本


Selector {property:value9;}
這種寫法只有IE9以及IE9以下版本能識別，這裡需要注意此處“9”只能是“9”不能是別的，比如說“8


”，不然會失去效果的，如：


.demo {background: lime9;}
6、IE8瀏覽器


Selector {property: value/;} 或者： @media �screen{ Selector {property: value;} }
上面寫法只有IE能識別，如：


.color {color: #fff/;} 或者： @media �screen{ .color {color: #fff;} }
7、IE8以及IE8以上的版本


Selector {property: value�;}
這種寫法只有IE8以及IE8以上版本支援，如


.demo {color: #ff0�;}
8、IE7瀏覽器


*+html Selector{property:value;} 或 *:first-child+html Selector {property:value;}
上面兩種是IE7瀏覽器下才能識別，如：


*+html .demo {background: green;} 或者： *:first-child+html .demo {background: green;}
9、IE7及IE7以下版本瀏覽器


Selector {*property: value;}
上面的寫法在IE7以及其以下版本都可以識別，如：


.demo {*background: red;}
10、IE6瀏覽器


Selector {_property/**/:/**/value;} 或者： Selector {_property: value;} 或者： *html 


Selector {property: value;}
具體應用如下：


.demo {_width/**/:/**/100px;} 或者： .demo {_width: 100px;} 或者： *html .demo {width: 


100px;}
上面具體介紹了各種版本瀏覽器下如何識別各種的Hack寫法，包括了IE6-9以及現代版本的瀏覽器寫法。


綜合上面的所述，我們針對不同瀏覽器的Hack寫法主要分為兩種從CSS選擇器和CSS屬性上來區別不同的


Hack寫法。下面我們分別來看這兩種的不同寫法：


CSS選擇器的Hack寫法
下面我們主要來看CSS選擇器和CSS屬性選擇器在不同瀏覽器的支援情況。下面先來看CSS選擇器支援情況


。


CSS選擇器的Hack寫法


1、IE6以及IE6以下版本瀏覽器


* html .demo {color: green;}
2、僅僅IE7瀏覽器


*:first-child+html .demo {color: green;}
3、除IE6之外的所有瀏覽器（IE7-9, Firefox,Safari,Opera）


html>body .demo {color: green;}
4、IE8-9,Firefox,Safari,Opear


html>/**/body .demo {color: green;}
5、IE9+


:root .demo {color: red;}
6、Firefox瀏覽器


@-moz-document url-prefix() { .demo { color: red; } }
6、Webkit核心瀏覽器（Safari和Google Chrome）


@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: red; } }
7、Opera瀏覽器


@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-


pixel-ratio:0) { head~body .demo { color: red; } }
8、iPhone / mobile webkit


@media screen and (max-device-width: 480px) { .demo { color: red } }
CSS屬性Hack寫法
1、IE6瀏覽器


.demo {_color: red;}
2、IE6-7瀏覽器識別


.demo {*color: red;}
3、所有瀏覽器除IE6瀏覽外


.demo {color/**/:red;}
4、IE6-9瀏覽器


.demo {color: red9;}
5、IE7-8瀏覽器


.demo {color/***/:red9;}
上面羅列的都是各種瀏覽器下的有關於CSS的Hack的寫法，基中有針對於現代瀏覽器Safari,Google 


Chrome和Firefox的寫法，而且也有針對於我們前端人員最討厭的IE6-9的各版本瀏覽器的Hack的寫法，


而且這些Hack我們又分為CSS選擇器的Hack寫法和CSS屬性的Hack寫法。然而具體何種適用，大家可以要


據自己的需求來定，下面列出我個人的兩種寫法：


一、經濟實惠型定法：
這種寫法注重單獨的CSS的Hack寫法。不同的瀏覽器使用不同的Hack寫法，其實也只是以IE的Hack寫法比


較多（因為我們寫Hack也主要是針對IE的瀏覽器）特別是IE6下的瀏覽器。單獨為各種瀏覽器寫Hack的好


處是：針對各種瀏覽順的Hack寫法省力易記。因為其他的瀏覽器主要是針對現代瀏覽器，相對來說是比


較少的。針對於這種Hack的使用，我推薦使用下面的方法：


.demo { color: red;/*所有現代瀏覽器*/ color: green9;/*所有IE瀏覽器*/ color: lime�;/*IE8-9瀏


覽器*/ *color: red;/*IE6-7瀏覽器*/ +color: blue;/*IE7瀏覽器*/ _color: orange;/*IE6瀏覽器*/ 


} @media all and (min-width:0px){ color: #000;/*Webkit和Opera瀏覽器*/ } @media screen and 


(-webkit-min-device-pixel-ratio:0) { color: #f36;/*Webkit核心瀏覽器*/ } @media all and (-


wekit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 


head~body .demo {color: #369;} /*Opera*/ } @-moz-document url-prefix(){ .demo


{color:#ccc;}/* all firefox */ }
二、完美主義寫法
這種方法是追求完美主義的寫法，主要是配合我們上一節所說的IE條件註釋，全部採用選擇器Hack的寫


法。這種寫法分兩步：


1、建立條件樣式表，並在HTML中body裡新增相應的class類名：


<!–[if IE6]–><<!–[if IE7]–><!–[if IE8]–><!–[if IE9]–><!–[if !IE]–>
2、接著建立對應的樣式


.demo {color: blue;}/*現代瀏覽器*/ .non-ie .demo {color: red;}/*除IE外瀏覽器*/ .ie9 .demo 


{color: yellow;}/*IE9瀏覽器*/ .ie8 .demo{color: green;}/*IE8瀏覽器*/ .ie7 .demo {color: 


orange;}/*IE7瀏覽器*/ .ie6 .demo {color: lime;}/*IE6瀏覽器*/ @media all and (min-width: 


0px){ .demo {color:black;} /* webkit and opera */ } @media screen and (-webkit-min-device-


pixel-ratio:0){ .demo{color:#369;}/* webkit */ } @media all and (-webkit-min-device-pixel-


ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo


{color:#cf6;}/* opera */ } @-moz-document url-prefix(){ .demo{color:#963;}/* firefox * / }
上面就是目前各種瀏覽器下，相關CSS的Hack的寫法，下面我們具體來看一個例項：


HTML Markup


test color


CSS Code


.demo { color: red;/*所有現代瀏覽器*/ color: green9;/*所有IE瀏覽器*/ color: lime�;/*IE8-9瀏


覽器*/ *color: red;/*IE6-7瀏覽器*/ +color: blue;/*IE7瀏覽器*/ _color: orange;/*IE6瀏覽器*/ 


} :root .demo {color: #9639;} @-moz-document url-prefix(){ .demo{color:#897;}/* all firefox 


*/ } @media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #000; 


}/*webkit*/ } @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-


min-device-pixel-ratio:0) { head~body .demo { color: red; }/*opera*/ }
========

史上最全的CSS hack方式一覽

http://blog.csdn.net/freshlover/article/details/12132801


做前端多年，雖然不是經常需要hack，但是我們經常會遇到各瀏覽器表現不一致的情況。基於此，某些


情況我們會極不情願的使用這個不太友好的方式來達到大家要求的頁面表現。我個人是不太推薦使用


hack的，要知道一名好的前端，要儘可能不使用hack的情況下實現需求，做到較好的使用者體驗。可是啊


，現實太殘酷，瀏覽器廠商之間歷史遺留的問題讓我們在目標需求下不得不向hack妥協，雖然這只是個


別情況。今天，結合自己的經驗和理解，做了幾個demo把IE6~IE10和其他標準瀏覽器的CSS hack做一個


總結，也許本文應該是目前最全面的hack總結了吧。


什麼是CSS hack
由於不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS


的支援、解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時，我們為了獲得


統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器


/不同版本寫相應的CSS code的過程，叫做CSS hack!


CSS hack的原理
由於不同的瀏覽器和瀏覽器各版本對CSS的支援及解析結果不一樣，以及CSS優先順序對瀏覽器展現效果的


影響，我們可以據此針對不同的瀏覽器情景來應用不同的CSS。


CSS hack分類
CSS Hack大致有3種表現形式，CSS屬性字首法、選擇器字首法以及IE條件註釋法（即HTML頭部引用if IE


）Hack，實際專案中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。


屬性字首法(即類內部Hack)：例如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識


別下劃線"_"，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。
選擇器字首法(即選擇器Hack)：例如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者


*:first-child+html .class{}。
IE條件註釋法(即HTML條件註釋Hack)：針對所有IE(注：IE10+已經不再支援條件註釋)： <!--[if IE]


>IE瀏覽器顯示的內容 <![endif]-->，針對IE6及以下版本： <!--[if lt IE 6]>只在IE6-顯示的內容 


<![endif]-->。這類Hack不僅對CSS生效，對寫在判斷語句裡面的所有程式碼都會生效。
　　
CSS hack書寫順序，一般是將適用範圍廣、被識別能力強的CSS定義在前面。


CSS hack方式一：條件註釋法
　
這種方式是IE瀏覽器專有的Hack方式，微軟官方推薦使用的hack方式。舉例如下


只在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]-->
CSS hack方式二：類內屬性字首法
屬性字首法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack字首，以達到預期的頁面展現


效果。


IE瀏覽器各版本 CSS hack 對照表


hack寫法 例項IE6(S) IE6(Q)IE7(S) IE7(Q)IE8(S) IE8(Q)IE9(S) IE9(Q)


IE10(S)IE10(Q)
**color 青色YYYY NYNYN


Y
++color 綠色YYYY NYNYN


Y
--color 黃色YYNN NNNNN


N
__color 藍色YYNY NYNYN


N
##color 紫色YYYY NYNYN


Y
\0color:red\0紅色N NNNYN YN


YN
\9\0color:red\9\0粉色N NNNNN YN


YN
!importantcolor:blue !important;color:green;棕色N NYN


YNYNY Y
說明：在標準模式中


“-″減號是IE6專有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只對IE9/IE10生效，是IE9/10的hack
demo如下


[css] view plain copy
<script type="text/javascript">  
    //alert(document.compatMode);  
</script>  
<style type="text/css">  
body:nth-of-type(1) .iehack{  
    color: #F00;/* 對Windows IE9/Firefox 7+/Opera 10+/所有Chrome/Safari的CSS hack ，選擇器


也適用幾乎全部Mobile/Linux/Mac browser*/  
}  
.demo1,.demo2,.demo3,.demo4{  
    width:100px;  
    height:100px;  
}  
.hack{  
/*demo1 */  
/*demo1 注意順序，否則IE6/7下可能無法正確顯示，導致結果顯示為白色背景*/  
    background-color:red; /* All browsers */  
    background-color:blue !important;/* All browsers but IE6 */  
    *background-color:black; /* IE6, IE7 */  
    +background-color:yellow;/* IE6, IE7*/  
    background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
    background-color:purple\0; /* IE8, IE9, IE10 */  
    background-color:orange\9\0;/*IE9, IE10*/  
    _background-color:green; /* Only works in IE6 */  
    *+background-color:pink; /*  WARNING: Only works in IE7 ? Is it right? */  
}  
  
/*可以通過javascript檢測IE10，然後給IE10的<html>標籤加上class=”ie10″ 這個類 */  
.ie10 #hack{  
    color:red; /* Only works in IE10 */  
}  
  
/*demo2*/  
.iehack{  
/*該demo例項是用於區分標準模式下ie6~ie9和Firefox/Chrome的hack，注意順序 
IE6顯示為：綠色， 
IE7顯示為：黑色， 
IE8顯示為：紅色， 
IE9顯示為：藍色， 
Firefox/Chrome顯示為：橘色， 
（本例IE10效果同IE9,Opera最新版效果同IE8） 
*/  
    background-color:orange;  /* all - for Firefox/Chrome */  
    background-color:red\0;  /* ie 8/9/10/Opera - for ie8/ie10/Opera */  
    background-color:blue\9\0;  /* ie 9/10 - for ie9/10 */  
    *background-color:black;  /* ie 6/7 - for ie7 */  
    _background-color:green;  /* ie 6 - for ie6 */  
}  
  
/*demo3 
例項是用於區分標準模式下ie6~ie9和Firefox/Chrome的hack，注意順序 
IE6顯示為：紅色， 
IE7顯示為：藍色， 
IE8顯示為：綠色， 
IE9顯示為：粉色， 
Firefox/Chrome顯示為：橘色， 
（本例IE10效果同IE9，Opera最新版效果也同IE9為粉色） 
 
*/  
.element {  
    background-color:orange;    /* all IE/FF/CH/OP*/  
}  
.element {  
    *background-color: blue;    /* IE6+7, doesn't work in IE8/9 as IE7 */  
}  
.element {  
    _background-color: red;     /* IE6 */  
}  
.element {  
    background-color: green\0; /* IE8+9+10  */  
}  
:root .element { background-color:pink\0; }  /* IE9+10 */  
  
/*demo4*/  
/* 
 
該例項是用於區分標準模式下ie6~ie10和Opera/Firefox/Chrome的hack，本例特別要注意順序 
IE6顯示為：橘色， 
IE7顯示為：粉色， 
IE8顯示為：黃色， 
IE9顯示為：紫色， 
IE10顯示為：綠色， 
Firefox顯示為：藍色， 
Opera顯示為：黑色， 
Safari/Chrome顯示為：灰色， 
 
*/  
.hacktest{   
    background-color:blue;      /* 都識別，此處針對firefox */  
    background-color:red\9;      /*all ie*/  
    background-color:yellow\0;    /*for IE8/IE9/10 最新版opera也認識*/  
    +background-color:pink;        /*for ie6/7*/  
    _background-color:orange;       /*for ie6*/  
}  
  
@media screen and (min-width:0){   
    .hacktest {background-color:black\0;}  /*opera*/  
}   
@media screen and (min-width:0) {   
    .hacktest { background-color:purple\9; }/*  for IE9/IE10  PS:國外有些習慣常寫作\0，根本


沒考慮Opera也認識\0的實際 */  
}  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {   
   .hacktest { background-color:green; } /* for IE10+ 此寫法可以適配到高對比度和預設模式，


故可覆蓋所有ie10的模式 */  
}  
@media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} }  


/*for Chrome/Safari*/  
  
/* #963棕色 :root is for IE9/IE10, 優先順序高於@media, 慎用！如果二者合用，必要時在@media樣式


加入 !important 才能區分IE9和IE10 */  
/* 
:root .hacktest { background-color:#963\9; }  
*/  
</style>  




demo1是測試不同IE瀏覽器下hack 的顯示效果
IE6顯示為：粉色，
IE7顯示為：粉色，
IE8顯示為：藍色，
IE9顯示為：藍色，
Firefox/Chrome/Opera顯示為：藍色，
若去掉其中的!important屬性定義，則IE6/7仍然是粉色，IE8是紫色，IE9/10為橙色，Firefox/Chrome


變為紅色，Opera是紫色。是不是有些奇怪：除了IE6以外，其他所有的表現都符合我們的期待。那為何


IE6表現的顏色不是_background-color:green;的綠色而是*+background-color:pink的粉色呢？其實是


最後一句所謂的IE7私有hack惹的禍？不是說*+是IE7的專有hack嗎？？？錯，你可能太粗心了！我們常


說的IE7專有*+hack的格式是*+html selector，而不是上面的直接在屬性上加*+字首。如果是為IE7定製


特殊樣式，應該這樣使用：


*+html #ie7test { /* IE7 only*/
color:green;
}
經過測試，我發現屬性字首*+background-color:pink;只有IE6和IE7認識。而*+html selector只有IE7


認識。所以我們在使用時候一定要特別注意。


demo2例項是用於區分標準模式下ie6~ie9和Firefox/Chrome的hack，注意順序
IE6顯示為：綠色，
IE7顯示為：黑色，
IE8顯示為：紅色，
IE9顯示為：藍色，
Firefox/Chrome顯示為：橘色，
（本例IE10效果同IE9,Opera最新版效果同IE8）


demo3例項也是用於區分標準模式下ie6~ie9和Firefox/Chrome的hack，注意順序
IE6顯示為：紅色，
IE7顯示為：藍色，
IE8顯示為：綠色，
IE9顯示為：粉色，
Firefox/Chrome顯示為：橘色，
（本例IE10效果同IE9，Opera最新版效果也同IE9為粉色）


demo4例項是用於區分標準模式下ie6~ie10和Opera/Firefox/Chrome的hack，本例特別要注意順序
IE6顯示為：橘色，
IE7顯示為：粉色，
IE8顯示為：黃色，
IE9顯示為：紫色，
IE10顯示為：綠色，
Firefox顯示為：藍色，
Opera顯示為：黑色，
Safari/Chrome顯示為：灰色，


CSS hack方式三：選擇器字首法
選擇器字首法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些


特定瀏覽器才能識別的字首進行hack。


目前最常見的是


*html *字首只對IE6生效
*+html *+字首只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { 


background: orange; }} 只對IE10有效
等等
結合CSS3的一些選擇器，如html:first-child，body:nth-of-type(1)，衍生出更多的hack方式，具體的


可以參考下表：


CSS3選擇器結合JavaScript的Hack
我們用IE10進行舉例：


由於IE10使用者代理字串（UserAgent）為：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; 


Trident/6.0)，所以我們可以使用javascript將此屬性新增到文件標籤中，再運用CSS3基本選擇器匹配


。


JavaScript程式碼:


var htmlObj = document.documentElement;
htmlObj.setAttribute('data-useragent',navigator.userAgent);
htmlObj.setAttribute('data-platform', navigator.platform );
CSS3匹配程式碼：


html[data-useragent*='MSIE 10.0'] #id {
color: #F00;
}
CSS hack利弊
一般情況下，我們儘量避免使用CSS hack，但是有些情況為了顧及使用者體驗實現向下相容，不得已才使


用hack。比如由於IE8及以下版本不支援CSS3,而我們的專案頁面使用了大量CSS3新屬性在


IE9/Firefox/Chrome下正常渲染，這種情況下如果不使用css3pie或htc或條件註釋等方法時,可能就得讓


IE8-的專屬hack出馬了。使用hack雖然對頁面表現的一致性有好處，但過多的濫用會造成html文件混亂


不堪，增加管理和維護的負擔。相信只要大家一起努力，少用、慎用hack，未來一定會促使瀏覽器廠商


的標準越來越趨於統一，順利過渡到標準瀏覽器的主流時代。拋棄那些陳舊的IE hack，必將減輕我們編


碼的複雜度，少做無用功。


最後補上一張引自國外某大牛總結的CSS hack表，這時一張6年前的舊知識彙總表了，放在這裡僅供需要


時候方便參考。
 
說明：本文測試環境為IE6~IE10，Chrome 29.0.1547.66 m，Firefox 20.0.1 ，Opera 12.02等。一邊工


作，一邊總結，總結了幾天寫下整理好，今天把它分享出來，文中難免有紕漏，如大俠發現請及時告知


！
========

常用CSS Hack

http://www.css88.com/book/css/hack/index.htm
條件Hack屬性級Hack選擇符級Hack
* 這裡只列舉一些使用比率較高的常用CSS Hack，且不考慮IE6以下的版本。若對其它更多Hack有興趣，


可Google或Baidu。
* CSS Hack一般都是利用各瀏覽器的支援CSS的能力和BUG來進行的。所以對瀏覽器的選擇大致可以分為


能力選擇和怪癖選擇(BUG)。能力通常是指瀏覽器對CSS特性的支援程度，而怪癖是指瀏覽器特有的一些


BUG。
* 友情提示：儘量找到通用方法而減少對CSS Hack的使用，大規模使用CSS Hack會帶來維護成本的提高


以及瀏覽器版本變化而帶來類似Hack失效等系列問題。
========

CSS Hack是什麼意思？

css hack有什麼用？
https://www.w3cschool.cn/css3/question-10231625.html


一、什麼是CSS Hack？
CSS hack谷歌翻譯給出的解釋是“CSS黑客”。


CSS Hack谷歌翻譯


百度翻譯給出的解釋是“瀏覽器相容;瀏覽器相容性問題”


CSS 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&lt;wbr&gt;Hack技術介紹及常用的Hack技巧集錦


3、IE條件註釋Hack：IE條件註釋是微軟IE5開始就提供的一種非標準邏輯語句。比如針對所有IE：


&lt;!-[if IE]&gt;&lt;!-您的程式碼-&gt;&lt;![endif]&gt;，針對IE6及以下版本：&lt;!-[if it IE 


7]&gt;&lt;!-您的程式碼-&gt;&lt;![endif]-&gt;，這類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 {background-color:gray;} }最後


這個是瀏覽器新貴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來解決相容性問題。
========