Question

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

我正在使用两个固定定位菜单 - 一个在锚点处滑出，另一个只是粘在底部。基本上 - 总是在顶部有滚动而总是在底部。

他们坚持，并且工作得很好 - 问题是，我在CSS中使用z-index，似乎IE7遇到了一些问题 - 使用IE7，粘性菜单落后于内容。我读到了一个试图将其定位为“亲戚”的建议。但这会破坏固定的。

有什么建议吗？谢谢你 -

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

这是一张更好地说明问题的图片。 http://tinypic.com/r/20fqqkp/7

Answer 1

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

设置为position: relative的IE6或IE7中的任何元素都将生成新的堆叠上下文。这意味着它们的元素的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（这是您在理智浏览器中看到的内容）。但由于父母双方都设置了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
  );
}

Answer 2

尝试zindex修复http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

IE 7 Z-Index和IE6固定定位

2 个答案: