Margin与float:left同时使用…

来源：互联网发布：a byte of python pdf 编辑：程序博客网时间：2024/04/30 12:39

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

[转载]Margin与float:left同时使用 <wbr>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 #UrbAreaul,#Container #SuburbArea ul{display:inline;margin:0px; padding:0px;list-style-type:none;}
#Container #UrbArea ulli,#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 aimg,#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 lia:hover{background-color:#cbcbcb;}

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

0 0