div css

您当前位置:匀阳教程网 >> 网页制作 >> css教程 >> div css >> 浏览文章

css属性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;

}

分享到:

网友评论:


热门教程
猜你喜欢的教程
Copyright 2010-2014 Powered by yysem.net
友情链接咨询:1143412387 304366329 豫ICP备11021559号
本网站部分内容来自于互联网以及相关书籍等各方,仅作技术交流学习之用,如果侵权敬请告知,我们会及时改正。