兼容各种浏览器的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、IE7浏览器

*+html Selector{property:value;} 或 *:first-child+html Selector {property:value;}
/*上面两种是IE7浏览器下才能识别，如：*/
*+html .demo {background: green;} 或者： *:first-child+html .demo {background: green;}

 

7、IE7及IE7以下版本浏览器

Selector {*property: value;}
/*上面的写法在IE7以及其以下版本都可以识别，如：*/
.demo {*background: red;}

8、IE6浏览器

加_下划线即可

 

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

7、Webkit内核浏览器（Safari和Google Chrome）

@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: red; } }

8、Opera浏览器

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

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

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

 

转载于:https://www.cnblogs.com/yclblog/p/6692148.html