IE6's Bug系列之双倍margin

在ie6中布局时，当子元素为浮动，而且具有跟浮动方向相同的margin时，第一个子元素即紧靠父元素的元素会产生该方向上双倍的margin值。如下所示：

<style type="text/css">
*{ margin: 0;
padding: 0;}

li{ list-style: none;}
ul{ overflow:hidden;zoom:1;background: green;}
li{ width: 98px;
height: 198px;
background: red;
border: #000 1px solid;
margin-right: 20px;
float: right;}
</style>


<body>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</body>

解决方法：为子元素添加样式{display:inline;}

◆注意：

这个现象仅当块级对象设置了浮动属性后才会出现，内联对象（行级对象）不会出现此问题。并且只有设置左边距和右边距的值才会出问题，上下边距不会出现问题。使用display:inline方法仅限于使用float时使用，否则显示会出现问题。多个子块在父块中使用float时，同行显示的多个子块只需要第一个使用display:inline

posted @ 2012-10-08 21:48  游不停的鱼  阅读(112)  评论(0)  编辑  收藏  举报