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之外，这似乎适用于所有浏览器，即使z-index较低，也会将#Cover放在整个页面上，包括#FirstLinkChoice。

我需要更改什么才能在IE7中使用它？不幸的是，我在生产中遇到了这种嵌套结构。

我完全可以使用基于Javascript的解决方案（没有javascript，链接将回退到弹出类似信息的页面）或仅适用于IE7的特殊CSS，因为我将使用条件样式表

Answer 1

将#FirstLinkChoice嵌套在应该由.body覆盖的元素#Cover内可能是原因。尝试将#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>

IE7 z-index问题与覆盖div

1 个答案: