浏览器兼容之旅第二站:各浏览器的Hack写法让浏览器达到一致的

2020-05-01 10:12:12易采站长站整理

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、IE8浏览器


Selector {property: value/;}
或者:
@media screen{
Selector {property: value;}
}

上面写法只有IE能识别,如:


.color {color: #fff/;}
或者:
@media screen{
.color {color: #fff;}
}

7、IE8以及IE8以上的版本


Selector {property: value;}

这种写法只有IE8以及IE8以上版本支持,如


.demo {color: #ff0;}

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-9以及现代版本的浏览器写法。综合上面的所述,我们针对不同浏览器的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-9, Firefox,Safari,Opera)