DIV多层嵌套循环margin

2021-03-10 08:50 jianzhan

今日在做登陆网页页面的情况下发现个margin-top的bug ;

原始编码以下:

html:


拷贝编码
编码以下:

<div class="logo"></div>
<div class="login_text">
<div id="error" class="errorstyle"></div>
</div>

css:


拷贝编码
编码以下:

.errorstyle {
height:20px;
width:225px;
background-color:#FFCCCC;
color:#F00;
font-size:12px;
border:#FF0000 solid 1px;
margin-top:10px; /* 留意这里 */
}

結果发现IE6.IE7一切正常,ie8,FF显示信息不正确。

关键:当两个器皿嵌套循环时,假如外层器皿和里层器皿之间沒有其他元素,firefox会把里层元素的margin-top功效于父元素。

处理计划方案:

1、应用波动来处理,将要子层编码改成:


拷贝编码
编码以下:

.errorstyle {
height:20px;
width:225px;
background-color:#FFCCCC;
color:#F00;
font-size:12px;
border:#FF0000 solid 1px;
margin-left:90px;
display:inline;
/* 下列编码调整FF和ie8的margin-top bug */
margin-top:10px;
float:left;
}

2、应用padding-top来处理(由于FF盒实体模型难题,不强烈推荐应用)

OK,1切都好了~

++++++++++++++++++++++++++++++++++++++++++++++++++

PS:

实际上这个是1个外边距叠加的难题,刚好firefox跟ie8中是正确的,而ie6、7当中是不正确的,內部器皿的margin与外界叠加,叠加的margin处在器皿外界。波动元素不容易造成外边距的叠加,因此间接性处理了你遇到的难题。