兼容问题整理(一)

兼容问题整理(一)

1.margin加倍的问题

设置为float的div在IE下设置的margin会加倍，这是IE6都存在的一个bug，解决方案是在这个div里加上display：inline

相应的css代码：

.myfloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*5px*/

}

2.div的垂直居中问题

vertical-align：middle；

3.ul和ol列表缩进问题

消除ul和ol列表缩进问题时，样式应该写成：

list-style:none;margin:0;padding:0;

4.css透明问题

IE:filter:alpha(opacity=50)

FF:opacity:0.6

注：最好两个都写，并将opacity属性放在下面

5.IE的双边距bug

产生条件：

（1）IE浏览器下

（2）float下

（3）浮动方向和浮动边界的方向一致，第一个元素的边距会是其他边距的双倍

解决方法：

（1）css hack 原来的margin-left设置为_margin-left,将边距设置为原来的一半，这种办法只能在IE6中起作用，火狐不行

（2）给第一个元素设置 display：inline

6.图片3像素

在任何浏览器中，图片都会有边距

解决方法：

（1）将图片转成块display：block

（2）给图片加浮动

7.图片默认边框

默认情况下，在网页插入图片，图片会有蓝色边框

解决办法：样式

img{border:none}或者img{birder:0;}

8.margin-top值叠加的问题

两个或多个相邻的普通流中的元素垂直向上的margin会折叠

解决办法：

（1）修改父元素的高度，增加padding-top样式

（2）为父元素添加overflow：hidden

（3）为父元素或子元素添加浮动

（4）为父元素添加border（border：1px solid transparent）

（5）为父元素或子元素添加绝对定位