IE 下拉 z-index 错误

发布于 2024-08-25 10:11:05 字数 608 浏览 5 评论 0原文

我在 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）中，以防有人查找它们。

如果有人可以提供一些建议，我将非常感激。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

橪书 2024-09-01 10:11:05

好的原始解决方案在这里 - 瑞士信贷网站。这可行，但使用了复杂的 z-index 解决方案。
这是非常简单和改进的解决方案 - Jeyjoo 库存图片库
这适用于 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 如何相互关联。

Ok originale solution here - Swiss credit website. This works but uses a complicated z-index solution.
Here is very simple and improved solution here - Jeyjoo stock image gallery
This works in IE6+, firefox, opera, safari and chrome

Solution

The 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>

The CSS

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

why it works

You have to tell IE how the two divs relate to one another.

回复收藏 0 原文

弥枳 2024-09-01 10:11:05

在 IE 中，如果绝对定位元素具有 z 索引，那么它包含相对定位元素必须指定 z 索引 (z-index:1)，以便绝对定位元素能够出现在其他相对定位元素之上。

所以我认为你需要给你的 ul.nav 一个 z-index 1。我实际上在我的博客。

更新：
因此，如果我将隐藏 ul 的可见性样式更改为可见，只要 ul.nav 具有正 z-index 值，它就会出现在 div 上方。因此，我认为这与 JS 从隐藏的 UL 渲染下拉菜单的方式有关。除非我有你所有的 HTML/CSS/JS，否则我无法真正解决这个问题，所以我只能为你指出正确的方向，我认为理解此页面会对您有很大帮助。

回复收藏 0 原文