ie7兼容问题

1.当子元素都浮动时，父元素应该是瘪了，如图：

.div1{border:1px solid red;width:300px}
.div{float:left}

<div class='div1'>
	<div class='div'>1</div>
    <div class='div'>2</div>
</div>

但是在ie7下，父元素被撑起来了

原因就是给父元素设置的宽度上，当不给父元素设置宽度时，ie7下：

2.margin重叠的问题

.zxx_test_box {background: #f3f3f3; border: 1px dashed #dddddd;margin-top: 10px;}
.zxx_margin_out {margin: 20px;background: #cacbcc;color: white;}
.zxx_margin_top {height: 40px;line-height: 40px;margin: 20px;background: #09C;text-indent: 20px;}
.zxx_margin_bot {height: 40px;line-height: 40px;margin: 20px;background: #C30;text-indent: 20px;}
<div class="zxx_test_box">
		<div class="zxx_margin_out">
			<div class="zxx_margin_top">margin:20px</div>
			<div class="zxx_margin_bot">margin:20px</div>
		</div>
	</div>

效果图：

1>加浮动

.zxx_test_box {background: #f3f3f3; border: 1px dashed #dddddd;margin-top: 10px;}
.zxx_margin_out {margin: 20px;background: #cacbcc;color: white;}
.zxx_margin_top {height: 40px;line-height: 40px;margin: 20px;background: #09C;text-indent: 20px;float:left;}
.zxx_margin_bot {height: 40px;line-height: 40px;margin: 20px;background: #C30;text-indent: 20px;clear:both;}

<div class="zxx_test_box">
		<div class="zxx_margin_out">
			<div class="zxx_margin_top">margin:20px</div>
			<div class="zxx_margin_bot">margin:20px</div>
		</div>
	</div>

效果图：

ie7下：

在IE7浏览器下，浮动可以解决margin-top以及margin-bottom重叠的问题。在Firefox火狐浏览器或是chrome谷歌浏览器下以及opera浏览器下，浮动只能解决同方向上的margin重叠问题。

2>给父级加overflow:hidden

ie7下：

3>给每个元素加display:inline-block

.zxx_test_box {
		    background: #f3f3f3;
		    border: 1px dashed #dddddd;
		    margin-top: 10px;
		}
		.zxx_margin_out {
		    margin: 20px;
		    background: #cacbcc;
		    color: white;
		    
		}
		.zxx_margin_top {
		    height: 40px;
		    line-height: 40px;
		    margin: 20px;
		    background: #09C;
		    text-indent: 20px;
			display:inline-block;
			width:100%;
		}
		.zxx_margin_bot {
		    height: 40px;
		    line-height: 40px;
		    margin: 20px;
		    background: #C30;
		    text-indent: 20px;
		    display:inline-block;
		    width:100%;
		}

ie7下：