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/;} 
上面寫法只有IE能識別，如：
.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\0;/*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\0; /*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*/ 
}