css - 带有覆盖 div 的 IE7 z-index 问题

Question

我的页面上有这个(简化的)DOM:

<div id="Cover" style="display: none;"></div>
<div class="body">
    <div id="header">
        <div class="controlContainer">
            <div id="FirstSelectorContainer">
                <div id="FirstLink"><a href="/scriptlessfallback">Open Link</a></div>
                <div id="FirstLinkChoice"><a href="/test">I should be clickable</a></div>
            </div>
        </div>
    </div>
</div>

#Cover 有这个 CSS:

#Cover
{
    background-color: white;
    filter: alpha(opacity=50);
    opacity: 0.5;
    -moz-opacity: 0.50;
    z-index: 600;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#FirstLinkChoice 有这个 CSS:

#FirstLinkChoice
{
    width: 616px;
    height: 77px;
    position: absolute;
    right: 144px;
    border: 1px solid #424242;
    z-index: 800;
    background-color: white;
    padding: 4px;
    text-align: left;
    display: none;
}

此脚本将点击事件添加到 #FirstLink:

$(document).ready(function () {
    if ($("#FirstLink").length) {
        $("#FirstLink").click(function () { $("#FirstLinkChoice").show(); dimOn(); return false; });
    }
});

(dimOn，仅使用 CSS display 属性激活封面。)

期望的结果是，当有人点击#FirstLink 时，封面会覆盖页面并且#FirstLinkChoice 的内容可供选择。

这似乎适用于所有浏览器，除了 IE7，IE7 将 #Cover 放在整个页面上，包括 #FirstLinkChoice，尽管 z-index 较低。

我需要更改什么才能使其在 IE7 中正常工作？不幸的是，我在生产中坚持使用这种嵌套结构。

我完全可以使用基于 Javascript 的解决方案(没有 javascript，链接将返回到与弹出窗口具有相似信息的页面)或仅适用于 IE7 的特殊 CSS，因为我将使用条件样式表。

Answer 1

在应该被 #Cover 覆盖的元素 .body 中嵌套 #FirstLinkChoice 可能是原因。尝试将 #FirstLinkChoice 放在 .body 之外。

例如:

<div id="Cover" style="display: none;"></div>
<div id="FirstLinkChoice"><a href="/test">I should be clickable</a></div>
<div class="body">
    ...
</div>