6

2 つの単純な html ページを作成しました。そのうちの 1 つは iframe を含み、2 つ目は最初のページの iframe に読み込まれます。最初のページはhttp://quatorze.atspace.co.uk/Webdev/shared/ffbug1.htmlにあります。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>:target bug in firefox</title>
    <style type=text/css>
    iframe:target {
        display: none;
    }
    ol {
        max-width: 480px;
        font-family: sans-serif;
    }
    li {
        margin: 8px;
    }
    span {
        color: red;
    }
    </style>
</head>
<body>
    <div id="div0">
        <p><a href="#if">HIDE</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#div0">SHOW</a></p>
        <iframe id="if" src="ffbug_files/ffbug3.html" width="400" height="200"></iframe>
        <ol>In Firefox click links on this page in following order:
            <li>Click "DIV 1". First div gets targeted and its background turns silver;</li>
            <li>Click "HIDE". Iframe gets targeted and its "display" property is set to "none";</li>
            <li>Click "SHOW". Iframe is no longer targeted and its "display" property is reset to "inline";</li>
            <li>Now click "DIV 2". Second div gets targeted and its background turns silver. First div is no longer targeted and its "background-color" must be reset to "skyblue" but <span>it remains silver</span>;</li>
            <li>Click "DIV 1". First div gets targeted, its background <span>was already silver</span>, second div is no longer targeted and its "background-color" is reset to "skyblue".</li>
            <li>Click "DIV 2". Second div gets targeted, its background turns silver, first div is no longer targeted, its "background-color"  is reset to "skyblue".</li>
            <li>Click "HIDE". Iframe gets targeted and its "display" property is set to "none";</li>
            <li>Click "SHOW". Iframe is no longer targeted and its "display" property is reset to "inline";</li>
            <li>Now click "DIV 1". First div gets targeted, its background turns silver. Second div is no longer targeted and its "background-color" must be reset to "skyblue", but <span>it remains silver</span>.
        </ol>
    </div>
</body>
</html>

iframe に読み込まれる 2 番目のページは、 http: //quatorze.atspace.co.uk/Webdev/shared/ffbug_files/ffbug3.htmlにあります。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>:target bug in firefox</title>
    <style type=text/css>
    div {
        width: 140px;
        height: 140px;
        border: 2px solid;
        margin: 6px;
        padding: 10px;
        background-color: skyblue;
        float: left;
    }
    div:target {
        background-color: silver;
    }
    </style>
</head>
<body>
    <div id="div1"><a href="#div1">DIV 1</a></div>
    <div id="div2"><a href="#div2">DIV 2</a></div>
</body>
</html>

ご覧のとおり、最初のページに「SHOW」と「HIDE」という 2 つのリンクがあります。

「SHOW」は div を含むことを指し、「HIDE」は iframe を指します。

iframe の「display」プロパティは、ターゲットにされたときに「none」に設定されます。

iframe に読み込まれる 2 番目のページには 2 つの div が含まれます。各 div には、その div を参照するリンクが含まれています。

各 div に設定された CSS ルールにより、対象が "skyblue" から "silver" に変更されると背景色が変更されます。

Firefox では、次の順序で最初のページのリンクをクリックしてみてください。

  1. 「DIV 1」をクリックします。最初の div が対象となり、その背景が銀色に変わります。

  2. 「非表示」をクリックします。iframe がターゲットになり、その「display」プロパティが「none」に設定されます。

  3. 「表示」をクリックします。iframe は対象外となり、その「表示」プロパティは「インライン」にリセットされます。

  4. 「DIV 2」をクリックします。2 番目の div がターゲットにされ、その背景が銀色に変わります。最初の div は対象外になり、その「背景色」を「スカイブルー」にリセットする必要があります (これは Chrome で実際に発生することです) が、銀色のままです。

4

2 に答える 2

-1

jquery を試してみてください。うまくいくと思います。私はあなたのコードでクロムを実行していますが、問題ありません。あなたがFirefoxの問題を言ったようです。クリックすると、div1、div2が青にリセットされます。お試しください。お役に立てれば幸いです。

于 2014-06-09T13:54:28.683 に答える