css - IE7 令人抓狂地在 div 下而不是在它上面显示列

Question

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

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

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

感谢您的帮助!

Answer 1

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

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

我首先删除了相关容器上的 z-index，从 body 到两个 <div>在#main-content .我设置了position: relative在 #main-content但离开了z-index不明确的。我设置了position: relative在两个<div>在#main-content并设置 z-index分别为 100 和 200。

在#content内, 第一个 <div> , 我添加了 z-index: 110第二个<div> (带小图片的那一排方 block )我加了z-index: 120 .

这似乎让 IE 7 的行为正确。

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