三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

如何避开麻烦的margin叠加(margin collapsing)
作者:Neoxone    发表时间: 2009年03月21号,星期六     阅读:22,077 次

斯芬克斯——ie私有属性haslayout这篇文章中,我们提到的第一个斯芬克斯之迷,其实就是一个margin叠加问题。
关于margin collapsing,在W3C中是有明文规范的,符合其规则的都将产生margin collapsing。W3C认为margin叠加后的布局界面更良好。

margin collapsing(css2.1规范)
margin collapsing(css2规范)

margin叠加现象(父子级别):

可以看出wrap未被子层的margin所撑开。

但是,这种margin叠加往往不是我们所想要的效果(一些人甚至将此称为一个bug:margin叠加bug,也有称高度不适应bug的)——平心而论,我们努力的要避开margin collapsing多少也有些违背了W3C的初衷。不过,由于ie下经常有意无意的会触发haslayout,从而会避开margin叠加,这使得浏览器间显示不一。因此,我们还是有理由在适当时候彻底避开margin叠加的。

那么,如何避免这种margin叠加现象呢?

从《斯芬克斯——ie私有属性haslayout》那篇文章中,我们知道,ie下触发haslayout可以避开margin叠加。那么其他浏览器呢?

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

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

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

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

标签: , ,

8 条评论 发表在“如何避开麻烦的margin叠加(margin collapsing)”上

  1. walkingp 说:

    请问你是怎么在 wp编辑器中插入“运行代码”的,谢谢。
    (最好email我,谢谢。)

    回复

    oneboys 回复:

    @walkingp, 使用这个插件,http://wordpress.org/extend/plugins/runcode/ 很简洁的一个插件

    回复

  2. 兄台文章质量总是这个好,呵呵

    回复

  3. 兄台文章质量总是这么好,呵呵

    “打错字了,汗”

    回复

    ONEBOYS 回复:

    过奖了,呵呵

    回复

  4. zhengyutong 说:

    此文犀利。

    回复

  5. [...] 写过一篇小文http://www.cssass.com/blog/index.php/2009/164.html [...]

  6. [...] 回复: 一般这种情况发生的原因是由于margin的叠加产生的,google到的第一篇相关文章,LZ可以参考一下: http://www.cssass.com/blog/index.php/2009/164.html [...]

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(