css常见BUG以及解决办法

css常见的bug及解决办法

图片在IE6及以下有边框

解决：给img{border：0 none}

div插入图片有间隙

解决：（1）div{font-size:0}
（2）img{display：block}

双倍浮向，在IE6及以下版本，浮动的元素，有设置margin，出现

双倍外边距。
解决：给浮动的元素设置display：inline

在IE6及以下版本，部分块级元素拥有默认高度

解决：设置font-size:0

表单元素行高不一样

解决：input{float：left}

按钮的大小不一样

解决：在input外边套一层标签，添加按钮的样式，把按钮的默认
样式去掉

百分比的bug，在IE6及以下版本中，解析的时候四舍五入计算，

50%+50% > 100%,
解决：把右边的浮动的元素，clear：right

透明属性

兼容其他浏览器写法：opacity:value;(value的取值范围0-1;
例：opacity:0.5;
)
IE浏览器写法：filter:alpha(opacity=value);取值范围 0-100(整数
)

margin塌陷

当前元素(父元素里面第一个子元素)与父元素没有设置任何浮动的情
况下，设置margin-top后，会错误的把margin-top加在父级元素上，
解决：
（1）给父级元素添加overflow:hidden;(推荐使用)
（2）给父元素设置border
（3）给父元素或者子元素设置float

margin合并BUG

当两个上下排列的元素，上元素有margin-bottom：30px；下面元素有
margin-top:20px；他们中间的距离不会叠加，而是会设置为较大的值
解决：给两个元素或者其中一个加上display：inline-block