IE7忽略边界在绝对定位的div后的div [英] IE7 ignoring margin in a div following an absolute positioned div

问题描述

我有一个容器里面有两个div，第一个有绝对定位。在ie7中，第二个div显然忽略了上边距。 padding似乎工作正常，但是出于视觉原因，我必须使用margin。

I have two divs inside a container, the first one has absolute positioning. In ie7, the second div apparently ignores the top margin. Padding seems to work fine, but for visual reasons I have to use margin.

我知道罪魁祸首是绝对定位的div，因为如果我删除它下面的div工作正常。

I know the culprit is the absolute positioned div because if i remove it the following div works fine.

这只发生在ie7（甚至不在ie6）。

This is only happening in ie7 (not even in ie6).

帮助！

编辑：我刚刚发现一个解决方案，包括给父div padding-为ie7。所以我只想知道为什么会发生这种情况，如果有一个更清洁的解决方案，但我不需要更多脏的黑客。

I just found a solution which consists of giving the parent div padding-top just for ie7. So I would just like to know why does this happen, and if there is one, a cleaner solution, but I dont need more dirty hacks..

推荐答案

这就是我们所说的保证金崩溃。你可以尝试定位第二个div。

This is what we call margin collapsing. You could try to positioning the second div too.

您可以找到有关保证金收回的更多信息。

You could find more information about margin collapsing.

只要检查以下条件，如果您在开始阅读整篇文章之前在代码中有任何条件。

Just check the conditions below if you have any of them in your code before start reading the whole article.

BODY元素从不参与
保证金崩溃，因为他们是
被认为是神奇的，这意味着
有时一个奇怪的差距不显示
Internet Explorer当它
在其他浏览器，当崩溃
发生在BODY的顶部。这个
通常很容易解决;只是防止
的其他
浏览器的边际崩溃，它的工作原理在互联网
资源管理器。 （请注意，HTML
元素的边距在任何浏览器的
中都不会折叠，这是正确的
行为。）

BODY elements never take part in margin collapsing, since they are considered magical, which means sometimes a strange gap does not show up in Internet Explorer when it does in other browsers, when the collapse happens with the top of the BODY. This is usually easy to solve; just prevent the margin collapse for the other browsers, and it works in Internet Explorer too. (Note that the HTML element's margins never collapse in any browser, this is correct behaviour.)

margin collapsing其中
一个内部元素有一个底部边界
和一个外部容器有一个底部
边界，可以导致
中间元素的背景溢出到
容器在Internet Explorer中。

In rare cases, margin collapsing where an inner element has a bottom border and an outer container has a bottom border, can cause the background of an intermediate element to spill into the container in Internet Explorer.

更有问题的bug是由
引起的Internet Explorer的奇怪的hasLayout
行为。这是一个基本的bug
在Internet Explorer 7和影响
几个其他事情，但这个
文章将只处理保证金
崩溃。在
上设置某些样式的元素使它有布局（一个
概念是唯一的Internet Explorer，
和不符合任何标准）。
导致
问题的最常见的风格是width。当一个元素
hasLayout它突然假定一个
的最小高度为1em，如果设置为
在Internet Explorer 6中的少一些，
如0.5em，它仍然使用1em。

The more problematic bug is caused by Internet Explorer's strange hasLayout behaviour. This is a fundamental bug in Internet Explorer 7- and affects several other things as well, but this article will only deal with margin collapsing. Setting certain styles on an element makes it "have layout" (a concept unique to Internet Explorer, and not compliant with any standards). The most common style that causes a problem is width. When an element hasLayout it suddenly assumes a minimum height of 1em, and if set to something less in Internet Explorer 6, such as 0.5em, it still uses 1em.

当以下条件之一为真时，元素具有布局：

An element has layout when one of the following conditions is true:

• 它具有指定的宽度和/或高度


• 它是一个inline-block（display：inline-block）


• position：absolute）


• 它是一个float（float：left，float：right）


• 这是一个表格元素


• 已转换（style =zoom：1）

• It has a width and/or a height specified
• It is an inline-block (display: inline-block)
• It has absolute positioning (position: absolute)
• It is a float (float: left, float: right)
• It is a table element
• It is transformed (style="zoom: 1")

高度通常不会导致
问题，因为设置高度将
防止崩溃在其他浏览器
反正。然而，在嵌套元素上触发hasLayout
，其中父代
已经使用
边界或填充阻止了边距折叠，可以导致边距
消失或通过
折叠父元素不管padding
或边框。一般来说，hasLayout是一个
混乱，最好避免它在
的地方，边距是至关重要的。

Height usually does not cause a problem, since setting height will prevent collapsing in other browsers anyway. However, triggering hasLayout on a nested element where the parent has prevented margin collapsing using borders or padding, can cause margins to disappear, or to collapse through the parent irrespective of the padding or borders. Generally, hasLayout is a mess, and it is best to avoid it in places where margins are critical.

我希望这将帮助你通过你的问题。

I hope this will help you to go through with your problems.

这篇关于IE7忽略边界在绝对定位的div后的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！