css - 相对定位的 div 高度在 IE6 中在负顶部之前相加

Question

我有以下

<div id=A style='height: 120px;'>
  <div id=B style='height: 100px;'>
    <div id=D style='height:  60px; top 0px; position: relative;'>Stuff D</div>
    <div id=E style='height:  80px; top: -40px; position: relative;'>Stuff E</div>
  </div>
  <div id=C style='height:  20px;'>Footer</div>
</div>

在 IE6 以外的浏览器中，这可以正常工作。但是，IE6 将 D 和 E 的高度增加到 140，并强制 B 变为 140，这将 C 向下推 40。但是，E 的顶部渲染为 40px，与 D 重叠。只是 B 的框变成了 140 高，只有在 IE6 中。

我可以用 CSS/HTML 做什么来使 IE6 运行而不影响其他获得它并将 B 保持在 100px 的浏览器？

Answer 1

并不是事先将高度相加而使您感到困惑-所有浏览器都这样做。事实上，IE 6 对当heightof#B的内容超过100px. 由于您知道您想要的高度#B，您可以添加overflow: hidden到现有样式。

<div id="B" style="height: 100px; overflow: hidden;">

Answer 2

我发现margin-top: -??px; 会做和 top: -??px 一样的事情。感谢您的帮助。我将尝试溢出：隐藏和！重要，因为它们听起来很有趣。