CSSASSCSSASSCSSASS

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

文章关键字 ‘margin collapsing’

如何避开麻烦的margin叠加(margin collapsing)

2009年03月21号,星期六

斯芬克斯——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的困扰

2009年03月21号,星期六

就象神话中的斯芬克斯一样,ie的私有属性haslayout是个神秘且让人困惑的难缠东西,她只游荡于ie(这片沙漠)之下。
她无法使用css声明直接创建。即便是对于ie,她也不能说是一个实实在在存在的属性。
ie下的元素有些本身拥有haslayout(基本上是一些拥有内在尺寸的可置换元素),有些可以通过一些css属性可以触发产生。

我们可以在ie developer toolbar上查看到到haslayout这个属性项,他的值是-1。这说明这个元素触发了layout。
详细haslayout资料:On having layout抄录
更详细资料:译文On having layout这篇文章本人还没怎么看,相信很多问题在这里都有解释

遇到斯芬克斯是件很麻烦的事情,她会给你提出很多怪怪的让人困惑的问题,更何况只要我们在ie沙漠中游荡的话,遇到的概率是非常高的。
遇到她,我们会有三种结果:
猜不出迷题的答案——我们会在迷失在困惑中;
猜错了迷题的答案——我们会误会很多东西;
猜对了迷题的答案——恭喜你,你就不用怕斯芬克斯这个丑婆娘了。

那让我们来猜一下她的几个比较困惑的问题吧。
(全文…)