兼容各种浏览器的hack写法-白红宇

兼容各种浏览器的hack写法

阅读量：4583 次

发布时间：2019-06-09

本文共 3533 字，大约阅读时间需要 11 分钟。

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