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