2018-6-17 895 0
源码

我们经常遇到火狐兼容,360不兼容,360兼容,ie不兼容,ie兼容,谷歌又不兼容,总之各种不兼容,这个调好了,那个又坏了,针对这一的问题,我们可以针对单一的浏览器单独写样式,这样就可以解决了,比如360兼容,但是火狐不兼容,我们就可以在不改变原css的情况下,针对火狐写个样式,就可以了。也就是说,这段代码任何浏览器都忽略掉它,而火狐看到了就优先渲染它。就是csshack。火狐:@-moz-documenturl-prefix(){这搭是放css语句的处所}Webkit枘核浏览器(chromeandsafari)@mediascreenand(-webkit-min-device-pixel-ratio:0){Selector{property:value;}}上面写法主要是针对Webkit内核的浏览器,如GoogleChrome和Safari浏览器:Opera浏览器:html:first-child>bodySelector{property:value;}或者:@mediaalland(min-width:0){Selector{property:value;}}或者:@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~bodySelector{property:value;}}IE9浏览器::rootSelector{property:value9;}上面是IE9的写法,具体应用如下::root.demo{color:#ff09;}IE9以及IE9以下版本Selector{property:value9;}background-color:#f1ee18;/*所有识别*/.background-color:#00deff\9;/*IE6、7、8识别*/+background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/1、Firefox@-moz-documenturl-prefix(){.selector{property:value;}}上面是仅仅被Firefox浏览器识别的写法,具体如:@-moz-documenturl-prefix(){.demo{color:lime;}}支持Firefox的还有几种写法:/*支持所有firefox版本*/#selector[id=selector]{property:value;}或者:@-moz-documenturl-prefix(){.selector{property:value;}}/*支持所有Gecko内核的浏览器(包括Firefox)*/*>.selector{property:value;}2、Webkit枘核浏览器(chromeandsafari)@mediascreenand(-webkit-min-device-pixel-ratio:0){Selector{property:value;}}上面写法主要是针对Webkit内核的浏览器,如GoogleChrome和Safari浏览器:@mediascreenand(-webkit-min-device-pixel-ratio:0){.demo{color:#f36;}}3、Opera浏览器html:first-child>bodySelector{property:value;}或者:@mediaalland(min-width:0){Selector{property:value;}}或者:@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~bodySelector{property:value;}}上面则是Opera浏览器的Hack写法:@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~body.demo{background:green;}}4、IE9浏览器:rootSelector{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浏览器*+htmlSelector{property:value;}或*:first-child+htmlSelector{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;}或者:*htmlSelector{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)html>body.demo{color:green;}4、IE8-9,Firefox,Safari,Opearhtml>/**/body.demo{color:green;}5、IE9+:root.demo{color:red;}6、Firefox浏览器@-moz-documenturl-prefix(){.demo{color:red;}}6、Webkit内核浏览器(Safari和GoogleChrome)@mediascreenand(-webkit-min-device-pixel-ratio:0){.demo{color:red;}}7、Opera浏览器@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~body.demo{color:red;}}8、iPhone/mobilewebkit@mediascreenand(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;}上面罗列的都是各种浏览器下的有关于CSS的Hack的写法,基中有针对于现代浏览器Safari,GoogleChrome和Firefox的写法,而且也有针对于我们前端人员最讨厌的IE6-9的各版本浏览器的Hack的写法,而且这些Hack我们又分为CSS选择器的Hack写法和CSS属性的Hack写法。然而具体何种适用,大家可以要据自己的需求来定,下面列出我个人的两种写法:一、经济实惠型定法:这种写法注重单独的CSS的Hack写法。不同的浏览器使用不同的Hack写法,其实也只是以IE的Hack写法比较多(因为我们写Hack也主要是针对IE的浏览器)特别是IE6下的浏览器。单独为各种浏览器写Hack的好处是:针对各种浏览顺的Hack写法省力易记。因为其他的浏览器主要是针对现代浏览器,相对来说是比较少的。针对于这种Hack的使用,我推荐使用下面的方法:.demo{color:red;/*所有现代浏览器*/color:green9;/*所有IE浏览器*/color:lime�;/*IE8-9浏览器*/*color:red;/*IE6-7浏览器*/+color:blue;/*IE7浏览器*/_color:orange;/*IE6浏览器*/}@mediaalland(min-width:0px){color:#000;/*Webkit和Opera浏览器*/}@mediascreenand(-webkit-min-device-pixel-ratio:0){color:#f36;/*Webkit内核浏览器*/}@mediaalland(-wekit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~body.demo{color:#369;}/*Opera*/}@-moz-documenturl-prefix(){.demo{color:#ccc;}/*allfirefox*/}二、完美主义写法这种方法是追求完美主义的写法,主要是配合我们上一节所说的IE条件注释,全部采用选择器Hack的写法。这种写法分两步:1、创建条件样式表,并在HTML中body里添加相应的class类名:<!–[ifIE6]–><<!–[ifIE7]–><!–[ifIE8]–><!–[ifIE9]–><!–[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浏览器*/@mediaalland(min-width:0px){.demo{color:black;}/*webkitandopera*/}@mediascreenand(-webkit-min-device-pixel-ratio:0){.demo{color:#369;}/*webkit*/}@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~body.demo{color:#cf6;}/*opera*/}@-moz-documenturl-prefix(){.demo{color:#963;}/*firefox*/}上面就是目前各种浏览器下,相关CSS的Hack的写法,下面我们具体来看一个实例:HTMLMarkuptestcolorCSSCode.demo{color:red;/*所有现代浏览器*/color:green9;/*所有IE浏览器*/color:lime�;/*IE8-9浏览器*/*color:red;/*IE6-7浏览器*/+color:blue;/*IE7浏览器*/_color:orange;/*IE6浏览器*/}:root.demo{color:#9639;}@-moz-documenturl-prefix(){.demo{color:#897;}/*allfirefox*/}@mediascreenand(-webkit-min-device-pixel-ratio:0){.demo{color:#000;}/*webkit*/}@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){head~body.demo{color:red;}/*opera*/}资料参考:https://www.cnblogs.com/xujanus/p/5653964.html