Windows系统下各浏览器兼容性

Windows系统下各浏览器常用CSS HACK汇总表

1. 此汇总表中测试浏览器的版本为：

微软系统自带：IE6、 IE7、IE8

火狐：Firefox 3.6.6

Safari：Safari 5.0

谷歌浏览器：Chrome 6.0.458.1 dev

Opera浏览器：Opera 10.60

2. 其中，多数CSS hack是在selector{property:value;}基础上更改的。

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

3. FF代表Firefox，Ch代表Chorme，Sa代表Safari，Op代表Opera

4. 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代码

#pcss5{

background:blue; /*非IE 背景藍色*/

background:red \9; /*IE6、IE7、IE8背景紅色*/

}

2.区别IE6,IE7,IE8,FF CSS HACK

【区别符号】：「\9」、「*」、「_」

【示例】：

#pcss5{

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)

【区别符号】：「*」、「_」

【示例】：

#pcss5{

background:blue; /*Firefox背景变蓝色*/

*background:black; /*IE7 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读

取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox

4.区别IE6、IE7、Firefox (EXP 2)

【区别符号】：「*」、「!important」

【示例】：

#pcss5{

background:blue; /*Firefox 背景变蓝色*/

*background:green !important; /*IE7 背景变绿色*/

*background:orange; /*IE6 背景变橘色*/

}

【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

5.区别IE7、Firefox

【区别符号】：「*」、「!important」

【示例】：

#pcss5{

background:blue; /*Firefox 背景变蓝色*/

*background:green !important; /*IE7 背景变绿色*/

}

【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。

6.区别IE6、IE7 (EXP 1)

【区别符号】：「*」、「_」

【示例】：

#tip {

*background:black; /*IE7 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。

7.区别IE6、IE7 (EXP 2)

【区别符号】：「!important」

【示例】：

#pcss5{

background:black !important; /*IE7 背景变黑色*/

background:orange; /*IE6 背景变橘色*/

}

【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。

8.区别IE6、Firefox

【区别符号】：「_」

【示例】：

#pcss5{

background:black; /*Firefox 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。

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

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做样式的时候就可以采用这个HACK。

3、IE6及IE6以下识别CSS HACK

* html {…}

这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。

html/**/ >body select {……}

这句与上一句的作用相同。

4、仅IE6不识别p hack

select { 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;}

这一句是在上一句中去掉了属性区的注释。只有IE5不识别

8、盒模型解决方法

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-wi dth: 0px){ select {……} }

针对Opera浏览器做单独的设定。

以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

本文来源：https://www.bwwdw.com/article/ds5l.html