IE6之3px

现象1：IE6下同一个父元素中的两个紧挨着的DIV，如果其中一个浮动另一个不浮动，则两个DIV之间会产生3px间隙。

案例：左栏宽度固定，右栏自动伸展的两栏布局，两个DIV之间产生了3px的间隙

如图：

代码：

1 <div class="content">
2     <div class="aside">左栏</div>
3     <div class="main">右栏</div>
4 </div>

css：

1 .content{ width:100%; background:#9FC; height:1000px; overflow:hidden; zoom:1;}
2 .aside,.main{ height:800px;}
3 .aside{ width:170px; float:left; background:#9C3;}
4 .main{background:#930;}

解决方法1：给浮动的元素添加margin-right:-3px;(或者margin-left:-3px;跟浮动方向相反)
解决方法2：如果另外一个DIV的宽度是固定的只需给这个DIV添加浮动即可

完整css

1 .content{ width:100%; background:#9FC; height:1000px; overflow:hidden; zoom:1;}
2 .aside,.main{ height:800px;}
3 .aside{ width:170px; float:left; background:#9C3;_margin-right:-3px;}
4 .main{background:#930; overflow:hidden; zoom:1;}

 

 

转载于:https://www.cnblogs.com/daxiong/articles/3360193.html