Question

我正在网站的右上角渲染一个小菜单。页面顶部始终有一个“横幅”图形（1024x80像素），菜单必须在其上面呈现。在IE 7，IE 8，FireFox和Safari中，菜单看起来很好。但是，在IE 6中，菜单有时会出现，并且在其他时间无法显示，没有可辨别的模式。在下面显示的CSS中，我在阅读之后将“z-index”放在类定义中，这是对IE 6中此类CSS问题的修复。但是，Renderville仍然没有任何乐趣。任何帮助将不胜感激！

这是为页面，标题和菜单定义的CSS：

Div.XPage { background-color: White; position:relative; width:1024px; border-left:1px solid #a4a4b1; border-right:1px solid #a4a4b1; margin:auto; text-align:left; z-index:10; }
Div.XHeader { background-color: White; clear:both; padding:0px; margin:0px; z-index:2; }
Div.XTopMenu { position:absolute; left:810px; top: 0px; width:214px; height:16px; background-color:#333333; z-index:3; }
Div.XTopMenuItem { width:70px; height:14px; margin-bottom:3px; text-align:center; float:left; }
Div.XTopMenuItem a { color: White; font-size:smaller; }

以下是使用这些CSS类的HTML：

<div class="XPage">
    <div class="XHeader">
        <a href='/Home.aspx'><img src="/images/Header.png" alt="Banner Graphic" border="0" width="1024" height="80" /></a>
    </div>
    <div class="XTopMenu">
        <div class='XTopMenuItem'><a href='/Home.aspx'>Home</a></div>
        <div class='XTopMenuItem'><a href='/Calendar.aspx'>Calendar</a></div>
        <div class='XTopMenuItem'><a href='/Logout.aspx'>Log Out</a></div>
    </div>
    ...
</div>

Answer 1

IE6存在z-indexing问题。在IE6中，z-index仅适用于兄弟姐妹。

我要尝试的事情：

反转html
为标题指定负z-index
让菜单在z-index上比标题更重要，比如说z-index:999。

如果没有那些你可以尝试给IE6一个不同的标题图像，它没有掩盖你想要菜单的去向。在许多情况下，我一直在努力让IE6降级支持，它是一个古老的浏览器，并且有太多的问题。因此，如果它是一个选项，我会考虑让它有一个略有不同的外观。当然，这可能不适合你。

Answer 2

z-index仅适用于定位元素（位置：绝对， position：relative，或position：fixed）。

您在Div.XHeader上没有这些，因此完全忽略了z-index。

在w3schools

上阅读有关z-index的更多信息

Answer 3

没有直接有用的信息，我担心，只是另一个建议，以防你完全绝望：

谷歌已经设法在GWT中解决了这个问题以及更多问题。请停下来，请 - 我不会在GWT中重写应用程序。但是，我建议查看他们的代码。在各种组件的实现中，它们有部分，有时是整个类，专门用于解决WebKit，Opera，IE6中的特定怪癖......他们的代码非常清晰且评论很好，通常不仅包括“什么”而且包括“为什么” ”

这种方法的有效性取决于您对相关代码（在Java中）的归零程度，理解它以及将基本要素的实现移至您自己的代码。

Answer 4

为什么z-index 10为Page？应该是在后台，对吧？您可以尝试将其索引设置为0或1吗？

为什么这个CSS的渲染对IE 6来说是个问题？

4 个答案: