《Windows系统下各浏览器兼容性》由会员分享，可在线阅读，更多相关《Windows系统下各浏览器兼容性（22页珍藏版）》请在金锄头文库上搜索。
1、Windows系统下各浏览器常用CSSHACKC总表HackLJVpe-Hitmlseiectori1*htmlQ)ector：1_property:value11*ItlBBJ*HUM!Ill,BJUWilIU&IMJHIIHMI*11l匹1-property:valued1html*Beiector11aproperty;value.1property:valje91ii1*HBiaini1a*liMiaiiiuaiimHiiiiikbii*_selector,x:-mciz-rny-link./-2aeiectoryx:-moz-any-link;工/=t*/bodyselector,x
2、:-moz-any-linkhtrrl/H*7bt)dsakctDQk:-moz2any-link,*default(1旦二型.用头的后匚回。南有手艮程.?口用diascitmndrid(-widtjkiemin-device-pixel-rafao：0)：奥纳觎it开头的Wmbkit浏览器恃有扩展样武2&nwdiwailand(webkit-miri-device-|piKal-rstio:lCOOOnotalland2(-webkit-min-device-pixel-ratio:IE6IE7lEdFFChSaOpQ与QSQQSQSQSQSNNNYNNNNnnnNNNYNNNMNMNNNN
3、YYYNYNNNNNIMNNNYYNNNNNNNNNNNXYYYNNNNNNNNNYYYNtiNNNN:NNNYYYYYNNNNNNNNNNYYYNYYNNNNNNHNYVYNYYHNNNNNNNNNNNYNNN!,NIMNNMNNNNYYNNNNNNNNNNNNYNINNNNNNNNPn1NNYYNWNNNNNNNNNNNNYYYYNNNNNNNNNNYYYYNNNNNNNNY1. 此汇总表中测试浏览器的版本为：微软系统自带：IE6、IE7、IE8火狐：Firefox3.6.6Safari：Safari5.0谷歌浏览器：Chrome6.0.458.1devOpera浏览器：Opera10.6
4、02. 其中，多数CSShack是在selectorproperty:value;基础上更改的。selector代表CSS选择器,property代表CSS特性，value代表特性的值。3. FF代表Firefox,Ch代表Chorme,Sa代表Safari,Op代表Opera4. Q代表QuirksMode,S代表StandardsMode。5. HackType列的数字，指的是上面CSShack的实现方式中的列表号。1是指利用浏览器对相同代码的解析和支持的不同实现的hack”，2是指以Firefox或Webkit特有的扩展样式实现的hack。一定遵守CSShack的三条原则。CSShack
5、是没有办法的时候才使用的解决兼容性问题的招术，是用兼容性问题去解决兼容性问题，无异于饮鸩止渴。切莫一有兼容性问题就使用，时刻记得改掉用CSShack修补的问题。IE6、IE7、IE8、Firefox兼容性CSSHACK代码+示例1 .区别IE和非IE浏览器CSSHACK代码#divcss5background:blue;/*非IE背景1色*/background:red9;/*IE6、IE7、IE8背景缸色*/2 .区另1JIE6,IE7,IE8,FFCSSHACK【区别符号】：9、*、【示例】：#divcss5background:blue;/*Firefox背景变蓝色*/backgroun
6、d:red9;/*IE8背景变红色*/*background:black;/*IE7背景变黑色*/_background:orange;/*IE6背景变橘色*/【说明】：因为IE系列浏览器可读9，而IE6和IE7可读*（米字号），另外IE6可辨识_（底线），因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器（像是Firefox、Opera、GoogleChrome、Safari等）。3 .区别IE6、IE7、Firefox（EXP1）【区别符号】：*、【示例】：#divcss5background:blue;/*Firefox背景
7、变蓝色*/*background:black;/*IE7背景变黑色*/_background:orange;/*IE6背景变橘色*/【说明】：IE7和IE6可读*（米字号），IE6又可以读_（底线），但是IE7却无法读取_，至于Firefox(非IE浏览器)则完全无法辨识*和_，因此就可以透过这样的差异性来区分IE6、IE7、Firefox4 .区别IE6、IE7、Firefox(EXP2)【区别符号】：*、important【示例】：#divcss5background:blue;/*Firefox背景变蓝色*/*background:greenimportant;/*IE7背景变绿色*/*
8、background:orange;/*IE6背景变橘色*/)【说明】：IE7可以辨识*和important，但是IE6只可以辨识*，却无法辨识important,至于Firefox可以读取important但不能辨识*因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。5 .区别IE7、Firefox【区别符号】：*、important【示例】：#divcss5background:blue;/*Firefox背景变蓝色*/*background:greenimportant;/*IE7背景变绿色*/)【说明】：因为Firefox可以辨识important但却无法辨识*，而IE7
9、则可以同时看懂*、important，因此可以两个辨识符号来区隔IE7和Firefox。6 .区别IE6、IE7(EXP1)【区别符号】：*、【示例】：#tip*background:black;/*IE7背景变黑色*/_background:orange;/*IE6背景变橘色*/)【说明】：IE7和IE6都可以辨识*(米字号)，但IE6可以辨识_(底线)，IE7却无法辨识，透过IE7无法读取_的特性就能轻髭区隔IE6和IE7之间的差异。7 .区别IE6、IE7(EXP2)【区别符号】：important【示例】：#divcss5background:blackimportant;/*IE7背
10、景变黑色*/background:orange;/*IE6背景变橘色*/)【说明】：因为IE7可读取important;但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识importantJ而直接跳到下一行读取CSS,所以背景色会呈现橘色。8 .区别IE6、Firefox【区别符号】：【示例】：#divcss5background:black;/*Firefox背景变黑色*/_background:orange;/*IE6背景变橘色*/)【说明】：因为IE6可以辨识_(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6,有效达成CSSha
11、ck。以上包括了火狐浏览器兼容问题及解决方法。CSSHack汇总快查(CSS兼容代码演示)以下是常用CSSHACK问题及解决代码-DIV+CSS网支持1、屏蔽IE浏览器(也就是IE下不显示)*:lang(zh)selectfont:12pximportant;/*FF的专用*/select:emptyfont:12pximportant;/*safari可见*/这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。*+htmlHACK当面临需要只针对IE7做样式的时候就可以采用这个3、IE6及IE6以下识别CSSHACK*html这个地方要特别注意很多地主都写了是I
12、E6的HACK其实IE5.X同样可以识别这个HACK。其它浏览器不识别。html/*/bodyselect这句与上一句的作用相同。4、仅IE6不识别divhackselectdisplay/*IE6不识另U*/:none;这里主要是通过CSS注释分开一个属性与值，流释在冒号前5、仅IE6识别支持.yangshi_height:20px;这里IE6支持识别CSS属性前“更下划线。6、仅IE6与IE5不识别select/*/display/*IE6,IE5不识别*/:none;这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释7、仅IE5不识别select/*IE5不识另U*/displ
13、ay:none;这一句是在上一句中去掉了属性区的注释。只有IE5不识别8、盒模型解决方法selctwidth:IE5.x宽度;voice-family:;voice-family:inherit;width:正确宽度;盒模型的清除方法不是通过important来处理的。这点要明确。9、清除浮动select:aftercontent:.;display:block;height:0;clear:both;visibility:hidden;在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。10、截字省略号select-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。11、只有Opera识别mediaalland(min-width:0px)select针又Opera浏览器做单独的设定。
