各种浏览器的Hack写法(chrome firefox ie等)

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-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;
}

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- 480px) { 
　　.demo {
　　color: red 
　　} 
}

CSS属性Hack写法
1、IE6浏览器

.demo {
_color: red;
}

2、IE6-7浏览器识别

.demo {
*color: red;
}

3、所有浏览器除IE6浏览外

.demo {
color/**/:red;
}

 @media all and (min-0px){
 color: #000;/*Webkit和Opera浏览器*/ 
} 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
color: #f36;/*Webkit内核浏览器*/ 
}  

二、完美主义写法
这种方法是追求完美主义的写法，主要是配合我们上一节所说的IE条件注释，全部采用选择器Hack的写法。这种写法分两步：

1、创建条件样式表，并在HTML中body里添加相应的class类名：

<!–[if IE6]–><<!–[if IE7]–><!–[if IE8]–><!–[if IE9]–><!–[if !IE]–>
2、接着创建对应的样式

.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- 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: lime9;/*IE8-9浏览器*/ 
*color: red;/*IE6-7浏览器*/
+color: blue;/*IE7浏览器*/
 _color: orange;/*IE6浏览器*/ 
} 
:root .demo {
color: #9639;/*IE9,FF,Chrome*/
} 
@-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*/ 
}

 ==========补充==========

Firefox: -moz-box-shadow
Safari: -webkit-box-shadow
Opera: -o-box-shadow
IE: -ms-box-shadow