CSS各浏览器兼容问题整理.docxVIP

目录 目录 1 一、 IE6/IE7/IE8/Firefox/Chrome/Safari 的 CSS hack 兼容一览表 3 区别 IE 和非 IE 浏览器 3 区别 IE6,IE7,IE8,FF 3 区别 IE6、IE7、Firefox (方法 1) 4 区别 IE6、IE7、Firefox (方法 2) 4 区别 IE7、Firefox 4 区别 IE6、IE7 (方法 1) 4 区别 IE6、IE7 (方法 2) 5 区别 IE6、Firefox 5 二、 IE 的 if 条件 Hack 5 三、 对齐产生的问题 6 div 的居中对齐问题 6 div 中文字垂直居中对齐的问题 7 怎样使一个层垂直居中于浏览器中 7 如何对齐文本与文本输入框 7 四、 宽高问题 7 IE6 下容器的宽度和 FF 解释不同 7 页面的最小宽度 8 为什么无法定义 1px 左右高度的容器 8 Firefox 关于 DIV 高度无法自适应 8 div 重叠的现象 9 IE 与宽度和高度的问题 9 div 嵌套时，外层 div 高度不能自适应 10 div 嵌套时 y 轴上 外层 div 到 内层 div 的距离的问题 10 padding，marign，height，width 的傻瓜式解决技巧 10 FORM 标签 10 五、 浮动 11 margin 加倍的问题 11 DIV 浮动 IE 文本产生 3 象素的 bug 11 怎么样才能让层显示在 FLASH 之上呢 11 float 的 div 闭合;清除浮动 12 自适应高度 13 六、 列表类 13 UL 的 padding 与 margin 13 ul 和 ol 列表缩进问题 14 list-style-image 无法准确定位 14 LI 中内容超过长度后以省略号显示的方法 14 七、 链接 14 游标手指 cursor 14 ,给 a 标签内 内容加上样式, 15 链接(a 标签)的边框与背景 15 ff 不支持 expression 例如去掉链接的边框要分别写不同的 css 15 超链接访问过后 hover 样式就不出现的问题 15 八、 背景、图片类 15 IE6 下为什么图片下有空隙产生 15 图片垂直于容器内 15 background 显示问题 16 背景颜色无法显示 16 背景透明问题 17 九、 其他问题 17 如何使连续长字段自动换行 17 为什么 web 标准中 IE 无法设置滚动条颜色了 18 属性选择器(这个不能算是兼容,是隐藏 css 的一个 bug) 19 IE 捉迷藏的问题 19 BOX 模型解释不一致问题 19 IE6 下绝对定位的容器内文本无法正常选择 19 CSS 双线凹凸边框 19 IE 选择符空格 BUG 20 ff 不支持body scroll=no scroll 属性 21 ff 不支持数据岛绑定 21 ff 不能用.click();方法打开链接 21 目前 FF2.0 为止都不支持 IE 的 name 锚点 22 一、 IE6/IE7/IE8/Firefox/Chrome/Safari 的CSS hack 兼容一览表 不同的浏览器对 CSS 的解释都有一点出入，特别是 padding, line-height 这些要细微控制的地方，下面的 hack 基本可以解决这个问题： 详细查看 在属性前加下划线(_)，那么此属性只会被 IE6 解释 在属性前加星号(*)，此属性只会被 IE7 解释 在属性值后面加\9，表示此属性只会被 IE8 解释 各浏览器 CSS hack 兼容表： 区别符号 !important IE6 IE7 √ IE8 FF √ Chrome Safari _ (底线) * (米字号) √ √ √ *+ √ \9 √ √ √ \0 √ nth-of-type(1) √ √ 代码如下: #test{ color:red; #test{ color:red; color:red !important; _color:red; *color:red; *+color:red; color:red\9; color:red\0; } body:nth-of-type(1) p{color:red;} /* 所有浏览器都支持 */ /* Firefox、IE7 支持 */ /* IE6 支持 */ /* IE6、IE7 支持 */ /* IE7 支持 */ /* IE6、IE7、IE8 支持 */ /* IE8 支持 */ /* Chrome、Safari 支持 */ 区别 IE 和