css - 带有固定标题元素和透明度的 ie7 中的 z-index 问题

Question

我使用 960.gs 模拟了一个页面，该页面有几个固定在 div 中的元素，页面的内容将在该 div 中流动。这个 div 的背景是 CSS 渐变，高度为 100%(如果渐变应用于页面的实际主体，它实际上不会扩展页面的整个宽度)。当用户向上滚动时，内容将在不透明菜单后面可见。

http://resume.jamesfishwick.com/

布局在 FF 和 Chrome 中如我所愿，但页面内容在 IE7 中滚动到固定的上部区域。

我知道正在创建一个新的堆叠上下文，但我一直无法通过摆弄相关元素或其父元素的 z-index 来解决此问题。我知道我可以合并网格使用的一些额外 div，但我一直无法以保持渐变和透明效果的方式这样做。

如何在 IE7 中实现这种外观？

Answer 1

您需要为滚动的 div 提供一个小于主标题上的 z-index 的 z-index。要控制 msie 7 的透明度，只需将以下 css 代码添加到文档末尾的 标记之前。

/* ie6 hack */
* html .gradientLayer { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path_to_images/mygradient.png', sizingMethod='scale')); }
/* ie7 hack */
*+ html .gradientLayer { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path_to_images/mygradient.png', sizingMethod='scale')); }