在IE6中,如果你设置了浮动,并给浮动元素设置了margin的话,你会发现margin的距离双倍了,下面青岛星网给大家讲下:IE6浮动元素margin加倍解决方法。
范例HTML代码
<h2>bug</h2> <p>第一个左浮动元素的margin-left加倍</p> <div class="m-demo"> <div class="itm itm-left">1</div> <div class="itm itm-left">2</div> <div class="itm itm-left">3</div> </div> <p>第一个右浮动元素的margin-right加倍</p> <div class="m-demo"> <div class="itm itm-right">1</div> <div class="itm itm-right">2</div> <div class="itm itm-right">3</div> </div> <h2>fix</h2> <p>因为内联元素没有此问题,所以通过设置display:inline解决</p> <div class="m-demo m-demo-fix"> <div class="itm itm-left">1</div> <div class="itm itm-left">2</div> <div class="itm itm-left">3</div> </div> <div class="m-demo m-demo-fix"> <div class="itm itm-right">1</div> <div class="itm itm-right">2</div> <div class="itm itm-right">3</div> </div>
CSS解决方法
/* IE6中浮动双边距 */ .m-demo{width:400px;height:20px;margin:0 0 10px;background:#ddd;} .m-demo .itm{width:20px;height:20px;line-height:20px;text-align:center;color:#fff;background:#ff0097;} .m-demo .itm-left{float:left;margin-left:20px;} .m-demo .itm-right{float:right;margin-right:20px;} .m-demo-fix .itm{display:inline;}