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

斯芬克斯之谜续——IE下失效的margin-left/right
作者:Neoxone    发表时间: 2009年05月26号,星期二     阅读:13,790 次

margin-left/right也会失效?
一般很多人遇到的margin失效都是纵向上面的:
一种情况是元素的确不支持margin-top/bottom(参看:关于margin-top/bottom在inline元素(non-Replaced)上不起作用的解释);
另一种情况则是元素产生了margin叠加(参看:如何避开麻烦的margin叠加(margin collapsing))。

那么margin-left/right怎么又会失效的呢?假如看过斯芬克斯之谜-IE私有属性haslayout的困扰那篇文章的童鞋,就会了解了:哦,又是haslayout啊。

我们来看看具体的失效代码:

我们会发现:.cont的margin:0 30px再IE下失效了。。。
好,既然说haslayout的问题,那么,我们知道,height属性会触发haslayout。去除.cont的height试试,果然margin-left/right起效了。
不过,不要急,我们可以消除触发子级元素的haslayout来解决失效,也可以给父级元素触发haslyout来解决这个问题:在.wrap上增加属性:zoom:1;
那么,所有谜团都在这里了吗?
我们试试,不改动其他属性,去除父级.wrap上的border。我们发现,margin-left/right也不会失效了…
(看来,border这个属性,还得多加研究啊。之前也遇到过类似border引起的问题的。。。)
haslayout的一点资料可以看这里:On having layout抄录

标签: , ,

6 条评论 发表在“斯芬克斯之谜续——IE下失效的margin-left/right”上

  1. leekic 说:

    你的文章太好了,想加你为友情链接,看你没有友链,不知道你是不是不需要,无论你加不加我的网站都没关系,这里只是想告诉你一下,真的很喜欢你的文章。

    回复

  2. stri 说:

    不错.haslayout

    回复

  3. hemin 说:

    只有IE6,7才这样,IE8不会。赶快修正吧,我转收了。

    回复

    oneboys 回复:

    对,ie8已经抛弃了haslayout属性了。
    对html+css的解释同FF很少有差别了

    回复

  4. qbaty 说:

    确切是去掉border-top

    回复

    ONEBOYS 回复:

    @qbaty,

    嗯,的确。
    去掉border-top,保留border-bottom
    我怀疑border-bottom这个属性也是会触发haslayout。(事实上,border被称做layout属性之一)

    回复

留下回复

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