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> <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 では、次の順序で最初のページのリンクをクリックしてみてください。
「DIV 1」をクリックします。最初の div が対象となり、その背景が銀色に変わります。
「非表示」をクリックします。iframe がターゲットになり、その「display」プロパティが「none」に設定されます。
「表示」をクリックします。iframe は対象外となり、その「表示」プロパティは「インライン」にリセットされます。
「DIV 2」をクリックします。2 番目の div がターゲットにされ、その背景が銀色に変わります。最初の div は対象外になり、その「背景色」を「スカイブルー」にリセットする必要があります (これは Chrome で実際に発生することです) が、銀色のままです。