怎么是你

关注互联网,关注搜索,关注信息技术对现代生活方方面面的影响

« DEDECMS中找不到上传的附件可以这样解决终于还是入手了一台三通小电直——飞马8088 »

margin-left边界双倍的成因及解决方法

        今天在用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;
}

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

网站分类

最近发表

最新评论及回复

文章归档

Search

Powered By Z-Blog 1.8 Spirit Build 80722 Designed by Han'space

桂ICP备06007671号Copyright building. Some Rights Reserved.