IE下拉z-index错误 [英] IE dropdown z-index bug

问题描述

我在IE（6和7）下的下拉菜单中遇到问题。

I'm having a problem with a dropdown menu under IE (6 and 7).

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

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

As you can see, the dropdown hides behind the main content area in IE.

这是一个已知的错误，一般建议是为标题和内容区域设置z索引，因此IE知道他们的地方，在文章中解释： a href =http://bit.ly/coSPcI =nofollow noreferrer> http://bit.ly/coSPcI

It's a known bug and general advice is to set a z-index for header and content areas, so IE knows their "place", explained in the article here: http://bit.ly/coSPcI

我将.header div的z-index设置为20，将.featured，.content，.primary，.main设置为1，尝试找到正确的div来解决问题。虽然下拉列表停止隐藏在.featured div后面，但它仍然隐藏在主要内容div之后（.primary或​​.main，.secondary很好）。

I've set the z-index of .header div to 20 and .featured, .content, .primary, .main to 1, trying to find the right div to fix the problem. While the dropdown stopped hiding behind the .featured div, it still hides behind the main content divs (either .primary or .main, .secondary is fine).

如果有人可以提供一些建议，我会在一个单独的样式表中设置这些div的索引。 d非常感谢。

If someone could provide some advice, I'd be very grateful.

推荐答案

Ok originale解决方案在这里 - 瑞士信用网站。这工作，但使用复杂的z-index解决方案。
这里是非常简单和改进的解决方案 - Jeyjoo库存图库
适用于IE6 +，firefox，opera，safari和chrome

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

解决方案

strong> HTML>

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>

CSS

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

为什么它起作用

why it works

IE如何两个div相互关联。

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

这篇关于IE下拉z-index错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！