您的位置：首页 > 其它

IE6's Bug系列之双倍margin

2012-10-08 21:48 99 查看

在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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航