当前位置:首页 > 前端 > HTML/CSS

两种方法完美解决css在IE6左右浮动产生的双倍边距

一, 无需设置任何IE Hack处理,完美兼容IE6

Css代码如下:

 .ceShiProBox{ display:block; width:600px; height:130px;
 margin:100px auto; border:1px solid #ccc;}
.ceShiProBox li{ display: block; width:150px; height:130px; float:left;}/**/
.ceShiProBox li img{ width:130px; height:130px;}

Dom结构代码如下:

 
<ul class="ceShiProBox">
    <li>
    	<img src="http://www.haw86.com/uploads/2012/08/051805202639.jpg" alt="" />
    </li>
	<li>
    	<img src="http://www.haw86.com/uploads/2012/08/051805202639.jpg" alt="" />
    </li>
	<li>
    	<img src="http://www.haw86.com/uploads/2012/08/051805202639.jpg" alt="" />
    </li>
	<li>
    	<img src="http://www.haw86.com/uploads/2012/08/051805202639.jpg" alt="" />
    </li>
</ul>

二,通过设置IE6的Hack来解决

Css代码如下:

 .ceShiProBox{ display:block; width:600px; height:130px;
 margin:100px auto; border:1px solid #ccc;}
.ceShiProBox li{ display: block; width:130px; height:130px; float:left; margin-left:20px; _margin-left:10px;}/**/
.ceShiProBox li img{ width:130px; height:130px;}

Dom结构代码如下:

读后有收获可以支付宝请作者喝咖啡
< 上一篇 下一篇 >
文章评论
评论功能改造中...
湘ICP备15005320号-1 似懂非懂 Powered by doyo. 网站地图
返回顶部