Margin与float:left同时使用…

原文地址：Margin与float:left同时使用 IE6有双倍距的bug 作者：箜房子

关于Margin-left或是Margin-right 与float:left同时使用时，在IE6会有双倍距的bug。

解决方案：在同时使用这两个参数的地方加 display:inline

 

上图总宽为630,其中市区和郊区宽度完全相同各为315px，市区与郊区之间的div设10px间距。图片与图片之间也是10px间距。图片及图片边框也就是a的鼠标经过效果共宽度为95px。3个95px的图片加3个10px的间隔正好是315px；但在IE6下，市区与郊区之间的div间隔却是双倍的，变成了20px。因此记住，只要同时使用Margin-left或是Margin-right 与float:left，必加display:inline

 

以下为CSS与HTML案例：
#Container{width:630px}

#Container #UrbArea,#Container #SuburbArea{ float:left;width:315px;}
h1,h2{width:305px; padding:0; font-size:14px; border-bottom:1px solid #e1e1e1; margin:0 0 10px 0; line-height:25px; color:#e58706}
#Container #UrbArea ul,#Container #SuburbArea ul{display:inline; margin:0px; padding:0px; list-style-type:none;}
#Container #UrbArea ul li,#Container #SuburbArea ul li{ width:95px; height:124px; margin:0 10px 0 0; padding:0; float:left; display:inline}
#Container #UrbArea ul li span,#Container #SuburbArea ul li span{color:#636363; text-decoration:none; line-height:26px; text-align:center; display:block;}
#Container #UrbArea ul li a img,#Container #SuburbArea ul li a img{ width:89px; height:89px; border:0; margin:3px}
#Container #UrbArea ul li a,#Container #SuburbArea ul li a{display:block; width:95px; height:95px; background-color:#ececec; border:0; text-decoration:none; font-size:12px}
#Container #UrbArea ul li a:hover,#Container #SuburbArea ul li a:hover{background-color:#cbcbcb;}

 

  

<div id="Container">
<div id="UrbArea">
   <h1>市区</h1>
   <ul>
    <li><a href="#"><IMG src="images/img2.jpg"></a><span>冲冠特价修身军</span></li>
    <li><a href="#"><IMG src="images/img2.jpg"></a><span>冲冠特价修牛军</span></li>
    <li><a href="#"><IMG src="images/img2.jpg"></a><span>冲冠特价修牛军</span></li>
    <li><a href="#"><IMG src="images/img2.jpg"></a><span>冲冠特价修牛军</span></li>
    <li><a href="#"><IMG src="images/img2.jpg"></a><span>冲冠特价修牛军</span></li>
    <li><a href="#"><IMG src="images/img2.jpg"></a><span>冲冠特价修牛军</span></li>
   </ul>
 </div> 
 <div id="SuburbArea">
   <h2>市区</h2>
   <ul>
    <li><a href="#"><IMG src="images/img2.jpg"></a><span>冲冠特价修身军</span></li>
    <li><a href="#"><IMG src="images/img2.jpg"></a><span>冲冠特价修牛军</span></li>
    <li><a href="#"><IMG src="images/img2.jpg"></a><span>冲冠特价修牛军</span></li>
    <li><a href="#"><IMG src="images/img2.jpg"></a><span>冲冠特价修牛军</span></li>
    <li><a href="#"><IMG src="images/img2.jpg"></a><span>冲冠特价修牛军</span></li>
    <li><a href="#"><IMG src="images/img2.jpg"></a><span>冲冠特价修牛军</span></li>
  </ul>
</div>