当前位置:文档之家› Windows系统下各浏览器兼容性

Windows系统下各浏览器兼容性

Win dows系统下各浏览器常用CSS HAC汇总表Hack________________________ iJ/pe"-Hitml sei ec tori 1*html selector 1_prop erty :value 1-property: valued 1html* Beiector| 1"property; value 1property: valued 1selector, c-moz-^ny-linkG -. 2selector^ xz-moz-any-link^ <moz-document y fl-prefix(){ (2)htrnl>/=t*/body selector, x:-moz-^ any-linkhtrril^^^body SQkctDQ K:~moz' ?any-link, x:def3ult{+H:} 娄二空屛头的.H舉険特百扩辰務式…..…2 ^irimdidseitan drid (-widtjkie min-dE vice-pixekratio:0)电…U;webkit开头的畑bkit測览器持有扩展样戒2dnwbiw ail and ('webkit-miri'device-|pixal-ratio; 10000)* not all and 2 (-webkit-min-device-pixel-ratio:Ch Sa Op1E6IE7iEd...—FF1. 此汇总表中测试浏览器的版本为:微软系统自带:IE6、IE7、IE8火狐:Firefox 3.6.6Safari : Safari 5.0谷歌浏览器:Chrome 6.0.458.1 devOpera 浏览器:Opera 10.602. 其中,多数CSS hack 是在selector{property:value;} 基础上更改的。

selector代表CSS选择器,property 代表CSS特性,value代表特性的值。

3. FF 代表Firefox ,Ch 代表Chorme ,Sa 代表Safari ,Op 代表Opera4. Q 代表Quirks Mode ,S 代表Standards Mode 。

5. Hack Type 列的数字,指的是上面CSS hack的实现方式中的列表号。

1是指利用浏览器对相同代码的解析和支持的不同实现的hack”,2是指以Firefox或Webkit 特有的扩展样式实现的hack。

一定遵守CSS hack的三条原则。

CSS hack是没有办法的时候才使用的解决兼容性问题的招术,是用兼容性问题去解决兼容性问题,无异于饮鸩止渴。

切莫一有兼容性问题就使用,时刻记得改掉用CSS hack修补的问题。

IE6、IE7、IE8、Firefox 兼容性CSS HACK 代码+ 示例1. 区别IE和非IE浏览器CSS HACK 代码#divcss5{background:blue; /* 非IE 背景藍色*/backgrounded \9; /*IE6 、IE7、IE8 背景紅色*/}2. 区另【J IE6,IE7,IE8,FF CSS HACK 【区别符号】:「\9」、「*」、「_」【示例】:#divcss5{background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/ }【说明】:因为IE系列浏览器可读「\9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就会让浏览器正确的读取到自己看得懂得CSS 语法,所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari 等)。

3. 区别IE6、IE7、Firefox (EXP 1)【区别符号】:「*」、「_」【示例】:#divcss5{background:blue; /*Firefox 背景变蓝色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明】:IE7和IE6可读「*」(米字号),IE6又可以读「_」(底线),但是IE7却无法读取「—」,至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」,因此就可以透过这样的差异性来区分IE6、IE7、Firefox4. 区另【J IE6、IE7、Firefox (EXP 2)【区别符号】:「*」、「!important」【示例】:#divcss5{background:blue; /*Firefox 背景变蓝色*/*background:green [important; /*IE7 背景变绿色*/*background:orange; /*IE6 背景变橘色*/【说明]:IE7可以辨识「*」和「!important」,但是IE6只可以辨识「*」,却无法辨识「!important」, 至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

5. 区别IE7、Firefox【区别符号]:「*」、「!important」【示例]:#divcss5{background:blue; /*Firefox 背景变蓝色*/*background:green !important; /*IE7 背景变绿色*/}【说明]:因为Firefox可以辨识「!important」但却无法辨识「*」,而IE7则可以同时看懂「*」、「!important」,因此可以两个辨识符号来区隔IE7和Firefox。

6. 区别J IE6、IE7 (EXP 1)【区别符号]:「*」、「_」【示例]:#tip {*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明]:IE7和IE6都可以辨识「*」(米字号),但IE6可以辨识「_」(底线),IE7却无法辨识,透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。

7. 区别J IE6、IE7 (EXP 2)【区别符号】:「!important」【示例】:#divcss5{background:black [important; /*IE7 背景变黑色*/background:orange; /*IE6 背景变橘色*/}【说明】:因为IE7可读取「!important;」但IE6却不行,而CSS的读取步骤是从上到下,因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS,所以背景色会呈现橘色。

8. 区别IE6、Firefox【区别符号】:「_」【示例】:#divcss5{background:black; /*Firefox 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明】:因为IE6可以辨识「_」(底线),但是Firefox却不行,因此可以透过这样的差异来区隔Firefox和IE6,有效达成CSS hack。

以上包括了火狐浏览器兼容问题及解决方法。

CSS Hack汇总快查(CSS兼容代码演示)以下是常用CSS HACK问题及解决代码-DIV+CSS网支持1、屏蔽IE浏览器(也就是IE下不显示)*:lang(zh) select {font:12px [important;} /*FF 的专用*/select:empty {font:12px [important;} /*safari 可见*/这里select是选择符,根据情况更换。

第二句是MAC上safari浏览器独有的2、仅IE7识别hack*+html {…}当面临需要只针对IE7做样式的时候就可以采用这个HACK3、IE6及IE6以下识另【J CSS HACK* html {…}这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.X同样可以识别这个HACK。

其它浏览器不识别。

html/**/ >body select { ...... }这句与上一句的作用相同。

4、仅IE6不识别div hackselect { display /*IE6 不识别*/:none;}这里主要是通过CSS注释分开一个属性与值,流释在冒号前5、仅IE6识别支持.yangshi{_height:20px;}这里IE6支持识别CSS属性前“_”下划线6、仅IE6与IE5不识别select/**/ { display /*IE6,IE5 不识别*/:none;}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释7、仅IE5不识别select/*IE5 不识别*/ { display:none;}&盒模型解决方法selct {width:IE5.x 宽度;voice-family :"\"}\""; voice-family:inherit; width: 正确宽度;}盒模型的清除方法不是通过important来处理的。

这点要明确。

9、清除浮动select:after {content:"."; 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识别media all and (min-wid th: 0px){ select { ..... } }针对Opera浏览器做单独的设定。

以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容导入特别的样式,也有的是写在HTML中的通过条件来或是导入需要的补丁样式。

性的容也分离出来,不妨试一下下面的几种过滤器。

相关主题