两种方法完美解决css在IE6左右浮动产生的双倍边距
HTML/CSS
2012-10-21
一, 无需设置任何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.
网站地图