今天在用DIV+CSS进行一个网页布局时发现有一个div的margin-left边界变成了设定值的两倍,但是在Dreamweaver及FF中显示却是正常的,只有在IE中出现这个问题。最后经过查找才知道这是一个IE的Bug,这种双边界的成因及解决方法:
这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间,在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样,双倍边界同样神秘地显示在居右的相同方式。例如:
HTML:
<div class="father">
<div class="sun1">第一个左浮动框</div>
<div class="sun2">第二个左浮动框</div>
</div>
若此时 给sun1 设置了如下CSS则margin-left 的宽度会变为两倍
.father{
width:600px;
}
sun1{
float:left;
width:200px;
margin-left:10px; 此处在IE中显示时会变成margin-left:20px;
}
sun2{
float:left;
width:200px;
}
解决方法:
简单地将{display: inline;}设置给浮动元素就是全部所需做的,也就是说要给浮动方向上的第一个元素添加这行代码。
sun1{
float:left;
width:200px;
margin-left:10px;
display: inline;
}