日期:2014-05-17  浏览次数:20588 次

css兼容性技巧集合
1.文字 本身的大小不兼容。解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。

2.ff 下容器高度限定,不要轻易给容器定义height。

4.浮动 的清除,ff下不清除浮动是不行的。

5.double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。     解决方案,给浮动容器定义display:inline。

7.吞吃 现象,还是ie6,上面div容器背景跑下边了。解决方案:使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

8.注释也能产生bug~    解决方案:用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。

9.img下的留白,解决方案:给img设定 display:block。

10.失去line-height。索性让img 和文字都 float

11.链接的hover状态。float起来,用margin 调整。

12.非链接的hover状态。div:hover{} 这样的样式ie6是不认的,在ie7、ff下才有效果。

14.无法彻底清除的float。解决方案:给ul 属性zoom:1 (给li 加zoom:1 没用)

div{background-color: red !important;background-color: blue;} IE6 即“blue”; FF 为“red”。

div{background-color: red;>background-color: blue;} ie能识别>值为blue

margin加倍的问题。解决方案是在这个div里面加上display:inline;

div靠顶端  初始化css代码 ? ? div,ul,li,dl,dd,dt{padding:0px;margin:0px} ? ? 
常见问题集合

 1.DOCTYPE 影响 CSS 处理
 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
  3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
?

?

参考自http://blog.sina.com.cn/s/blog_609b53430100ogkh.html