當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css hack 学习总结

發布時間：2025/4/14 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 css hack 学习总结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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：<![endif]-->，針對IE6及以下

版本：<![endif]-->，這類Hack不僅對CSS生效，對寫在判斷語句里

面的所有代碼都會生效。
書寫順序，一般是將識別能力強的瀏覽器的CSS寫在后面。下面如何寫里面說得更詳細些。
常用的CSS hack方式
（1）方式一條件注釋法
只在IE下生效

只在IE6下生效

只在IE6以上版本生效

只在IE8上不生效

非IE瀏覽器生效

（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 IE7 FireFox
* √ √ ×
!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+已經不再支持條件注釋)： ，針對IE6及以下版本： 。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。
　　
CSS hack書寫順序，一般是將適用范圍廣、被識別能力強的CSS定義在前面。

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

只在IE下生效


只在IE6下生效


只在IE6以上版本生效


只在IE8上不生效


非IE瀏覽器生效

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 青色 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
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<wbr>Hack技術介紹及常用的Hack技巧集錦

3、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 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來解決兼容性問題。
========

總結

以上是生活随笔為你收集整理的css hack 学习总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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

css
Hack