css - IE 7 Z-Index 和 IE6 固定定位

Question

我有一个垂直滚动的网站 - 除了一些边距问题和渲染一些 .PNGS 的问题外，它在 IE7 中运行良好 - 但我有一个大问题；

我使用了两个固定位置的菜单 - 一个在 anchor 处滑出，另一个紧贴底部。本质上 - 那些总是在滚动条的顶部，而那些总是在底部。

它们会粘住并且工作正常 - 问题是，我在 CSS 中使用 z-index 并且 IE7 似乎有一些问题 - 对于 IE7，粘性菜单位于内容后面。 我读到一条试图将其定位为“相对”的建议。但这会破坏固定的。

有什么建议吗？谢谢你所做的一切-

子问题 - 不太重要，因为我不再携带 IE6 - 但是，有没有办法继续为 IE6 使用这些菜单 - 一种解决它而不是阅读位置的方法:已修复？

这里有一张图片可以更好地说明问题。 http://tinypic.com/r/20fqqkp/7

Answer 1

如果没有任何代码，很难确定，但您看到的问题很可能是 z-index bug在 IE 中。

任何在 IE6 或 IE7 中设置了 position: relative 的元素都会生成一个新的堆叠上下文。这意味着不在同一堆叠上下文中的元素的 z-index 不一定会像您期望的那样堆叠。

例如，考虑这个 HTML:

<div id="parent-1">
    <div id="child-1"></div>
</div>

<div id="parent-2">
    <div id="child-2"></div>
</div>

还有这个 CSS:

/* Both parents create their own stacking context */
#parent-1, #parent-2 {
  position: relative;
}

#child-1, #child-2 {
  position: fixed;      
}

/* Should be lower */
#child-1 {
  z-index: 10;      
}

/* Should be higher */
#child-2 {
  z-index: 20;      
}

根据规范，#child-2 应该总是堆叠得比 #child-1 高(这就是您在健全的浏览器中看到的)。但由于 parent 双方都设置了 position: relative，IE6-7 将创建 2 个堆叠上下文，可能不会为您执行此操作。

解决方法是将 z-index 应用于创建堆叠上下文的元素，或确保所有元素都在相同的堆叠上下文中。

至于你的 IE6 问题，是的，你可以用 CSS expressions 来模拟它。 .在 IE6 only 中使用以下内容样式表:

/* Fixed to the top */
#top-fixed {
  position: absolute;
  top: expression(document.documentElement.scrollTop);    
}

/* Fixed to the bottom */
#bottom-fixed {
  position:absolute;
  top:expression(
     document.documentElement.scrollTop +  
     document.documentElement.clientHeight - 
     this.clientHeight
  );
}