關於各瀏覽器下Hack的寫法

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

一、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; }
二、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; } }
三、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; } }
四、IE9瀏覽器

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

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

Selector {property:value9;}
這種寫法只有IE9以及IE9如下版本能識別，這裏須要注意此處「9」只能是「9」不能是別的，好比說「8」，否則會失去效果的，如：

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

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

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

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

.demo {color: #ff0?;}
八、IE7瀏覽器

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

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

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

.demo {*background: red;}
十、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寫法

一、IE6以及IE6如下版本瀏覽器

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

*:first-child+html .demo {color: green;}
三、除IE6以外的全部瀏覽器（IE7-9, Firefox,Safari,Opera）

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

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

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

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

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

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { color: red; } }
八、iPhone / mobile webkit

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

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

.demo {*color: red;}
三、全部瀏覽器除IE6瀏覽外

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

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

.demo {color/***/:red9;}
上面羅列的都是各類瀏覽器下的有關於CSS的Hack的寫法，基中有針對於現代瀏覽器Safari,Google Chrome和Firefox的寫法，並且也有針對於咱們前端人員最討厭的IE6-9的各版本瀏覽器的Hack的寫法，並且這些Hack咱們又分爲CSS選擇器的Hack寫法和CSS屬性的Hack寫法。然而具體何種適用，你們能夠要據本身的需求來定，下面列出我我的的兩種寫法：

1、經濟實惠型定法：
這種寫法注重單獨的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 */ }
2、完美主義寫法
這種方法是追求完美主義的寫法，主要是配合咱們上一節所說的IE條件註釋，所有采用選擇器Hack的寫法。這種寫法分兩步：

一、建立條件樣式表，並在HTML中body裏添加相應的class類名：

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

.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*/ }