margin-top 无效,避开麻烦的margin叠加(margin collapsing)

问题:

<div id=”top” style=”height:100px;background-color:#CCC;”></div>
<div id=”parent” style=”background-color:#F9F; overflow:hidden;”>
<div id=”child” style=”margin-top:10px; background-color:#99F;”>想实现效果: Chile 与 parent 间有 10px 间距 <br /> 可 margin-top:10px; 后, 是 parent 与 wrap 间有 10px 间距</div><div></div>
</div>

暂时解決方法:

方法一:在父级内部的添加上、下两个空元素。
有些教科书上将这种方法称为完美的解决方法。但实际当中我们一般不会使用,因为这种方法不仅要多加两个无意义元素标签,对这两个元素还要特别设置CSS使其高度为0。):

<style type=”text/css”>
*{padding:0;margin:0;}
#wrap{background:#ccc;}
#content{background:#eee;margin:50px 0;}
</style>
</head>
<body>
<div id=”wrap”>
<div>&nbsp;</div>
<div id=”content”>margin:50px 0;<br />上下各添加一个额外空元素。元素只要不脱离文档流,就能在ie,ff等浏览器下避开margin-top塌陷。如果元素是脱离文档流的,只要是触发了haslayout,在ie下也能避开塌陷。这两个元素一般要设置其高为0,而不让其增加页面的额外高度。</div>
<div>&nbsp;</div>
</div>

第二种,在父级上使用border属性(属性值0和none除外)。
这个方法也不大经常使用,因为在wrap上至少要设置一个1px的多余边框(上下两个就是2px),而且这条边线的颜色的颜色设置也是个问题,因为可能在wrap内部会使用背景图片(background-image),那么这条边线就无法伪装隐藏了。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<head>
<style type=”text/css”>
*{padding:0;margin:0;}
#wrap{background:#ccc;border:1px solid #ccc} /* border的颜色设置同background一样 */
#content{background:#eee;margin:50px 0;}
</style>
</head>
<body>
<div id=”wrap”>
<div id=”content”>margin:50px 0;</div>
</div>
</body>
</html>

最后一个方法,就利用到了ie的haslayout原理了(清除浮动也用到了这种方法)。对于ff下,在父级(wrap)上使用overflow:hidden;对于ie则触发其layout——如何触发,可以看这篇文章:on having layout

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<head>
<style type=”text/css”>
*{padding:0;margin:0;}
#wrap{background:#ccc;overflow:hidden;width:100%}
#content{background:#eee;margin:50px 0;}
</style>
</head>
<body>
<div id=”wrap”>
<div id=”content”>margin:50px 0;</div>
</div>
</body>
</html>

(overflow:hidden也会触发ie7中的layout。但是对之前的ie版本无效,否则倒是可以一个属性搞定)。

Tagged as: