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; });
    }
});

(dimOn、CSSdisplayプロパティを使用してカバーをアクティブにするだけです。)

望ましい結果は、誰かが#FirstLink表紙をクリックしてページに移動し、の内容#FirstLinkChoiceを選択できるようになることです。

これは、z-index が低いにもかかわらず#Coverページ全体を表示するIE7 を除くすべてのブラウザで正常に動作するようです。#FirstLinkChoice

これを 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 に答える