IE7 疯狂地在 div 下而不是在它上面显示列答案

【问题标题】：IE7 maddeningly displaying columns under a div instead of over itIE7 疯狂地在 div 下而不是在它上面显示列
【发布时间】：2010-05-18 04:53:17
【问题描述】：

如果您在 IE7 中查看此页面：http://65.60.10.2/~marionin/，为什么浅紫色标题（“Spotlights”、“Serendipity Projects”、“Marion Institute Blog”）隐藏在深紫色带下方？

我已经烧到我的手指受伤了，但我想不通。列 div 写在块 div 之后，因此它们应该显示在顶部。即使将块和列的位置设置为相对位置，使用 z-index 也无济于事。

[当然，正如预期的那样，在 Firefox、Safari、Opera 和 Chrome 中一切看起来都很好。]

感谢您的帮助！

【问题讨论】：

标签： css internet-explorer z-index

【解决方案1】：

IE 有可怕的 z-index 错误，这些错误通常是无法解决的。经过一番摆弄 IE 开发人员工具栏后，我能够使其在 IE 7 中运行。

我注意到由于某种原因，许多元素都定义了 z-index，但这些元素并没有出现在 HTML 中。您是否正在运行设置任何 z-indexes 的脚本？我注意到它们的顺序是相反的，这意味着高级元素的 z-index 比低级元素高。这是在 IE 中创建大量错误的一种方法。 HTML 在层次结构中出现的越深，它的 z-index 就应该越高。

我首先删除了相关容器上的 z-index，从正文到 #main-content 中的两个 <div>s。我在#main-content 上设置了position: relative，但未定义z-index。我在#main-content 中的两个<div>s 上设置了position: relative，并将z-index 分别设置为100 和200。

在#content中，第一个<div>，我添加了z-index: 110，第二个<div>（带有小图片的那一行）我添加了z-index: 120。

这似乎让 IE 7 正常运行。

如果还有我没有提到的定义了z-index 的其他内容，请尝试将其删除并从头开始。定义z-index 的元素越少，IE 出现不良行为的机会就越少。

【讨论】：

感谢您的介绍！是的，在这一点上，一堆 z-index 是试图解决这个（和其他）显示问题的遗留物。这就像把自己挖进一个该死的洞！
哦，我认为许多 z-index 与旋转的小 js 幻灯片有关。而我的看法是，“静态”基本上是说“从现在开始就放弃所有这些并表现得像往常一样”。甜蜜。

【解决方案2】：

#block-block-11 {
    position: static;
}

...快速修复 CalebD 雄辩详细描述的更大问题。

【讨论】：

天哪，我爱我一个单行修复！谢谢！
仅供参考，它实际上回避了 CalebD 提出的问题，因为它从 z-index 考虑中删除了该块。您可能需要考虑在某个时候解决更大的问题。很高兴我能帮上忙。