前面1节《访问器适配之旅的第1站:怎样建立标准款式》和大伙儿1起讨论了怎样建立标准款式，掌握和学习培训了建立IE标准款式的方式和她们所起的功效，非常是了解了标准注解所起的功效。那末这1节将和大伙儿1起学习培训：访问器适配之旅的第2站:各访问器的Hack写法
尽管和大伙儿在1起学习培训各访问器的Hack的写法，但我還是要说“Hack针对1位技术专业的前端开发攻程师来讲其实不是1样很好的物品，我务求解决访问器适配，尽可能不应用Hack写法来解决，除非确实沒有方法的状况下，再加以应用。”下面大家先来简易的掌握1下甚么是CSS Hack。
Hack是对于不一样的访问器去写不一样的CSS款式，从而让各访问器能做到1致的3D渲染实际效果，那末对于不一样的访问器写不一样的CSS CODE的全过程，就叫CSS HACK，另外也叫写CSS Hack。随后将Hack放在访问器特殊的CSS文档中，让其合乎标准的访问器分析这些编码，就如前面所说的 标准款式，大家将CSS Hack编码放入标准款式文档中，合乎标准的访问器就分析，不符的将不分析，从面做到您所必须的网页页面3D渲染实际效果。总的1句话来讲 应用CSS Hack可能应用你的CSS编码一部分丧失功效，随后依靠标准款式，应用其原CSS编码在1些访问器分析，而CSS Hack编码在合乎标准规定的访问器中取代原CSS那一部分编码。 普遍的便是在IE6下应用，不实际说，我想大伙儿都有碰到过了。下面大家就1起看来看全部访问器都具备甚么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>b\ody 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: value\9;}
上面是IE9的写法，实际运用以下：
:root .demo {color: #ff0\9;}
5、IE9和IE9下列版本号
Selector {property:value\9;}
这类写法仅有IE9和IE9下列版本号能鉴别，这里必须留意此处“\9”只能是“\9”不可以是其他，例如说“\8”，要不然会丧失实际效果的，如：
.demo {background: lime\9;}
6、IE8访问器
Selector {property: value/;}
或：
@media \0screen{
Selector {property: value;}
}
上面写法仅有IE能鉴别，如：
.color {color: #fff/;}
或：
@media \0screen{
.color {color: #fff;}
}
7、IE8和IE8以上的版本号
Selector {property: value\0;}
这类写法仅有IE8和IE8以上版本号适用，如
.demo {color: #ff0\0;}
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⑼和当代版本号的访问器写法。综合性上面的所述，大家对于不一样访问器的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⑼, Firefox,Safari,Opera）
html>body .demo {color: green;}
4、IE8⑼,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⑺访问器鉴别
.demo {*color: red;}
3、全部访问器除IE6访问外
.demo {color/**/:red;}
4、IE6⑼访问器
.demo {color: red\9;}
5、IE7⑻访问器
.demo {color/*\**/:red\9;}
上面列举的全是各种各样访问器下的相关于CSS的Hack的写法，基中有对于于当代访问器Safari,Google Chrome和Firefox的写法，并且也是有对于于大家前端开发人员最反感的IE6⑼的各版本号访问器的Hack的写法，并且这些Hack大家又分成CSS挑选器的Hack写法和CSS特性的Hack写法。但是实际何种可用，大伙儿能够要据自身的要求来定，下面列出我本人的两种写法：
1、经济发展实惠型定法：
这类写法重视独立的CSS的Hack写法。不一样的访问器应用不一样的Hack写法，实际上也只是以IE的Hack写法较为多（由于大家写Hack也关键是对于IE的访问器）非常是IE6下的访问器。独立为各种各样访问器写Hack的益处是：对于各种各样访问顺的Hack写法省劲易记。由于别的的访问器关键是对于当代访问器，相对性来讲是较为少的。对于于这类Hack的应用，我强烈推荐应用下面的方式：
.demo {
color: red;/*全部当代访问器*/
color: green\9;/*全部IE访问器*/
color: lime\0;/*IE8⑼访问器*/
*color: red;/*IE6⑺访问器*/
+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、完善现实主义写法 这类方式是追求完美完善现实主义的写法，关键是相互配合大家上1节所说的IE标准注解，所有选用挑选器Hack的写法。这类写法分两步：
1、建立标准款式表，并在HTML中body里加上相应的class类名：
<!--[if IE6]-- ><body class="ie6" ><<![endif]-->
<!--[if IE7]-- ><body class="ie7" ><![endif]-->
<!--[if IE8]-- ><body class="ie8" ><![endif]-->
<!--[if IE9]-- ><body class="ie9" ><![endif]-->
<!--[if !IE]-- ><body class="non-ie" ><![endif]-->
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的写法，下面大家实际看来1个案例：
HTML Markup
<div class="demo" >test color </div>
CSS Code
.demo {
color: red;/*全部当代访问器*/
color: green\9;/*全部IE访问器*/
color: lime\0;/*IE8⑼访问器*/
*color: red;/*IE6⑺访问器*/
+color: blue;/*IE7访问器*/
_color: orange;/*IE6访问器*/
}
:root .demo {color: #963\9;}
@-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*/
}
请看最后实际效果图：
下面列举了各访问器下的Hack的写法，大伙儿写访问的CSS Hack时还可以参照下面的图表
注：上图如果看不清晰，能够点一下电脑鼠标右键，将照片储存到当地后访问，实际效果会更佳。上图还可以前往centricle.com线上查询。
那末到此就详细介绍完了相关于各访问器的CSS Hack的写法，大伙儿在平常必须应用Hack时能够依据CSS的挑选器Hack和CSS的特性Hack对号入座，但是我還是强调 在Web网页页面制做中尽可能不必应用CSS Hack来解决适配难题。由于任何访问器下出現3D渲染不1致都极有将会是大家自身的构造或款式不符W3C的一些规定，或说违反了访问器的一些标准而先导致的，因此大家应当尽可能根据构造或CSS的改动来做到各访问器3D渲染1致实际效果，除非到了万不可已状况下，才考虑到CSS的Hack。
