我在一个容器中有两个 div，第一个具有绝对定位。在 ie7 中，第二个 div 显然忽略了上边距。填充似乎工作正常，但出于视觉原因，我必须使用边距。
我知道罪魁祸首是绝对定位的 div，因为如果我删除它，以下 div 工作正常。
这只发生在 ie7 中（甚至在 ie6 中也没有）。
救命！
编辑：我刚刚找到了一个解决方案，其中包括为 ie7 提供父 div padding-top。所以我只想知道为什么会发生这种情况，如果有的话，一个更清洁的解决方案，但我不需要更多肮脏的黑客......
【问题讨论】：
标签： html css internet-explorer internet-explorer-7
这就是我们所说的边距折叠。您也可以尝试定位第二个 div。
您可以找到有关边距折叠的更多信息。
在开始阅读整篇文章之前，只需检查以下条件（如果您的代码中有任何条件）。
BODY 元素从不参与 边距崩溃，因为它们是 被认为是神奇的，这意味着 有时一个奇怪的差距没有显示 当它出现在 Internet Explorer 中时 在其他浏览器中，当折叠 发生在身体的顶部。这 通常很容易解决；只是防止 另一个的边距崩溃 浏览器，它可以在互联网上运行 探险家也是。 （请注意，HTML 元素的边距永远不会塌陷 任何浏览器，这是正确的 行为。）
在极少数情况下，边距折叠 一个内部元素有一个底部边框 外容器有底部 边框，可能会导致背景 中间元素溢出到 Internet Explorer 中的容器。
问题较多的错误是由 Internet Explorer 奇怪的 hasLayout 行为。这是一个基本错误 在 Internet Explorer 7- 中并影响 还有其他几件事，但这 文章只会处理边距 崩溃。设置某些样式 一个元素使它“有布局”（一个 Internet Explorer 独有的概念， 并且不符合任何标准）。 最常见的风格导致 问题是宽度。当一个元素 hasLayout 它突然假设一个 最小高度为 1em，如果设置为 Internet Explorer 6 中的内容较少， 比如0.5em，还是用1em。
当满足以下条件之一时，元素具有布局：
- 它具有指定的宽度和/或高度
- 它是一个inline-block（显示：inline-block）
- 具有绝对定位（位置：绝对）
- 它是一个浮点数（浮点数：左，浮点数：右）
- 它是一个表格元素
- 已转换（style="zoom: 1"）
身高通常不会导致 问题，因为设置高度会 防止在其他浏览器中崩溃 反正。但是，触发 hasLayout 在父元素所在的嵌套元素上 已防止边距崩溃使用 边框或填充，可能会导致边距 消失或崩溃 父母不考虑填充 或边界。一般来说，hasLayout 是一个 乱七八糟，最好避免 边距至关重要的地方。
我希望这将帮助您解决问题。
【讨论】：
就我而言，以上没有任何帮助。我在这些元素之间使用了额外的 DIV。这个额外的 DIV 有 clear: both, flot: none 等。有关更多信息，请参阅http://starikovs.com/2010/12/24/ie7-margin-top-and-absolute-pos-element/。
【讨论】：
我使用了位置：静态；在 IE7 修复的忽略边距上的较大 div 上（位置：相对于内部内容）。较小的左侧列保持位置：绝对。这是在 Jquery 垂直选项卡上使用的。
【讨论】：