解决css中存在的几种兼容性问题

img标签底部间隙问题

div中包含一张图片，底部可能有2px,4px或更多的间隙，不同的font-size会影响这个间隙的大小。

<style type="text/css">
	div{
    	border: 5px solid red;
        float: left;
    }
</style>
<div><img src="photo.png" alt=""></div>

解决方法：

• 将图片由行内元素转换为块级元素， display:block
• 将包含图片的父容器的字体大小设置为0，font-size:0

img如果加了超链接之后会有蓝色边框

< a>标签中包含img，在IE下会出现一个蓝色边框。

解决方法：

• 将图片边框取消， border:none;

IE6 双倍边距

当我们给元素添加浮动的并指定左外边距的时候，IE6会出现双倍边距。

解决方法：

• 为该元素添加 display:inline;

margin上下边框合并问题

两个div容器，如果同时给上下两个div都加外边框的话，会发生边框合并。

div{
    border:1px solid gray;
    width:100px;
    height:100px;
}
div.one{
    margin-bottom:30px;
}
div.two{
    margin-top:50px;
}
/*one和two相距50px*/

解决方法：

• 只给一个容器调整外边框即可，不要同时给两个。