css - IE 下拉 z-index 错误

Question

我在使用 IE(6 和 7)下的下拉菜单时遇到问题。

http://www.amaconsulting.pl/promocje.html

如您所见，下拉菜单隐藏在 IE 中的主要内容区域后面。

这是一个已知的错误，一般建议是为标题和内容区域设置一个 z-index，这样 IE 就知道它们的“位置”，在此处的文章中有解释:http://bit.ly/coSPcI

我已将 .header div 的 z-index 设置为 20，将 .featured、.content、.primary、.main 设置为 1，试图找到正确的 div 来解决问题。虽然下拉列表不再隐藏在 .featured div 后面，但它仍然隐藏在主要内容 div 后面(.primary 或 .main，.secondary 都可以)。

这些 div 的 z 索引设置在单独的样式表中，即 .css，以防有人查找它们。

如果有人能提供一些建议，我将不胜感激。

Answer 1

这里是原始解决方案 - Swiss credit website .这可行，但使用了复杂的 z-index 解决方案。这是非常简单和改进的解决方案 - Jeyjoo stock image gallery这适用于 IE6+、firefox、opera、safari 和 chrome

解决方案

HTML

<div id="container_page" class="container_page">
  <div id="container_header" class="container_header">
    NAV BAR GOES HERE
  </div>
  <div id="container_body" class="container_body">
    ...body text...
  </div>
</div>

CSS

#container_page #container_header {position:relative;z-index:2;}
#container_page #container_body {position:relative;}

为什么有效

你必须告诉 IE 两个 div 是如何相互关联的。