CSS各浏览器兼容问题整理

目录

目录 (1)

一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表 (3)

1) 区别IE和非IE浏览器 (3)

2) 区别IE6,IE7,IE8,FF (3)

3) 区别IE6、IE7、Firefox (方法1) (4)

4) 区别IE6、IE7、Firefox (方法2) (4)

5) 区别IE7、Firefox (4)

6) 区别IE6、IE7 (方法1) (4)

7) 区别IE6、IE7 (方法2) (5)

8) 区别IE6、Firefox (5)

二、IE 的if条件Hack (5)

三、对齐产生的问题 (6)

1) div的居中对齐问题 (6)

2) div中文字垂直居中对齐的问题 (7)

3) 怎样使一个层垂直居中于浏览器中 (7)

4) 如何对齐文本与文本输入框 (7)

四、宽高问题 (7)

1) IE6下容器的宽度和FF解释不同 (7)

2) 页面的最小宽度 (8)

3) 为什么无法定义1px左右高度的容器 (8)

4) Firefox 关于DIV高度无法自适应 (8)

5) div重叠的现象 (9)

6) IE与宽度和高度的问题 (9)

7) div嵌套时，外层div高度不能自适应 (10)

8) div嵌套时y 轴上外层div 到内层div 的距离的问题 (10)

9) padding，marign，height，width 的傻瓜式解决技巧 (10)

10) FORM标签 (10)

五、浮动 (11)

1) margin加倍的问题 (11)

2) DIV浮动IE文本产生3象素的bug (11)

3) 怎么样才能让层显示在FLASH之上呢 (11)

4) float的div闭合;清除浮动 (12)

5) 自适应高度 (13)

六、列表类 (13)

1) UL的padding与margin (13)

2) ul和ol列表缩进问题 (14)

3) list-style-image无法准确定位 (14)

4) LI中内容超过长度后以省略号显示的方法 (14)

七、链接 (14)

1) 游标手指cursor (14)

2) ,给a标签内内容加上样式, (15)

3) 链接(a标签)的边框与背景 (15)

4) ff不支持expression 例如去掉链接的边框要分别写不同的css (15)

5) 超链接访问过后hover样式就不出现的问题 (15)

八、背景、图片类 (15)

1) IE6下为什么图片下有空隙产生 (15)

2) 图片垂直于容器内 (15)

3) background 显示问题 (16)

4) 背景颜色无法显示 (16)

5) 背景透明问题 (17)

九、其他问题 (17)

1) 如何使连续长字段自动换行 (17)

2) 为什么web标准中IE无法设置滚动条颜色了 (18)

3) 属性选择器(这个不能算是兼容,是隐藏css的一个bug) (19)

4) IE捉迷藏的问题 (19)

5) BOX模型解释不一致问题 (19)

6) IE6下绝对定位的容器内文本无法正常选择 (19)

7) CSS双线凹凸边框 (19)

8) IE选择符空格BUG (20)

9) ff不支持 scroll属性 (21)

10) ff不支持数据岛绑定 (21)

11) ff不能用.click();方法打开链接 (21)

12) 目前FF2.0为止都不支持IE的name锚点 (22)

一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可以解决这个问题：详细查看

•在属性前加下划线(_)，那么此属性只会被IE6解释

•在属性前加星号(*)，此属性只会被IE7解释

•在属性值后面加"\9"，表示此属性只会被IE8解释

各浏览器CSS hack兼容表：

代码如下:

#test{

color:red; /* 所有浏览器都支持*/

color:red !important; /* Firefox、IE7支持*/

_color:red; /* IE6支持*/

*color:red; /* IE6、IE7支持*/

*+color:red; /* IE7支持*/

color:red\9; /* IE6、IE7、IE8支持*/

color:red\0; /* IE8支持*/

}

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/

1)区别IE和非IE浏览器

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

#tip{

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

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

}

（详细查看）2)区别IE6,IE7,IE8,FF

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