age*_*eto 4 html css internet-explorer internet-explorer-7
我在容器内有两个div,第一个具有绝对定位.在ie7中,第二个div明显忽略了上边距.填充似乎工作正常,但出于视觉原因,我必须使用保证金.
我知道罪魁祸首是绝对定位div,因为如果我删除它,以下div工作正常.
这只发生在ie7(即使在ie6中).
救命!
编辑:我刚刚找到了一个解决方案,它包括为ie7提供父div填充顶部.所以我想知道为什么会发生这种情况,如果有的话,一个更清洁的解决方案,但我不需要更多的肮脏黑客..
这就是我们所说的保证金崩溃.您也可以尝试定位第二个div.
您可以找到有关边距折叠的更多信息.
在开始阅读整篇文章之前,如果您的代码中有任何条件,请检查以下条件.
BODY元素从不参与边缘折叠,因为它们被认为是神奇的,这意味着当在其他浏览器中,当崩溃发生在BODY的顶部时,Internet Explorer中有时会出现奇怪的间隙.这通常很容易解决; 只是防止其他浏览器的边距崩溃,它也适用于Internet Explorer.(请注意,HTML元素的边距永远不会在任何浏览器中崩溃,这是正确的行为.)
在极少数情况下,边距折叠,其中内部元素具有底部边框,外部容器具有底部边框,可能导致中间元素的背景溢出到Internet Explorer中的容器中.
更有问题的错误是由Internet Explorer的奇怪的hasLayout行为引起的.这是Internet Explorer 7中的一个基本错误,也会影响其他几个方面,但本文仅讨论边距折叠问题.在元素上设置某些样式使其"具有布局"(Internet Explorer独有的概念,并且不符合任何标准).导致问题的最常见的风格是宽度.当一个元素hasLayout时,它突然假定最小高度为1em,如果在Internet Explorer 6中设置为较小的值,例如0.5em,它仍然使用1em.
当满足下列条件之一时,元素具有布局:
- 它具有指定的宽度和/或高度
- 它是一个内联块(显示:内联块)
- 它具有绝对定位(位置:绝对)
- 它是一个浮点数(浮点数:左,浮点数:右)
- 它是一个表元素
- 它被转换(style ="zoom:1")
高度通常不会导致问题,因为设置高度无论如何都会阻止其他浏览器崩溃.但是,在嵌套元素上触发hasLayout,其中父级已使用边框或填充阻止边距折叠,可能导致边距消失,或者无论填充或边框如何都会通过父级折叠.一般来说,hasLayout是一团糟,最好在边距很关键的地方避免它.
我希望这能帮助你解决问题.