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下：