1

我的页面上有这个（简化的）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; });
    }
});

display（dimOn，只需使用 CSS属性激活封面。）

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

这似乎适用于除 IE7 之外的所有浏览器，它会#Cover覆盖整个页面，包括#FirstLinkChoice尽管 z-index 较低。

我需要改变什么才能让它在 IE7 中工作？不幸的是，我在生产中被这种嵌套结构所困扰。

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

4

1 回答 1

0

嵌套在应该被覆盖#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>
于 2013-01-28T12:17:49.590 回答