2つの単純なhtmlページを作成しました。そのうちの1つにiframeが含まれ、2つ目のページが最初のページのiframeに読み込まれます。 最初のページは、あなたが「SHOW」と「HIDEという名前の最初のページに2つのリンクがあります見ることができるようにhttp://quatorze.atspace.co.uk/Webdev/shared/ffbug_files/ffbug3.html：iframe内のコンテンツにtarget css pseudoclassが正しく設定されていない場合
<!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>
に位置していますインラインフレームにロードされている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>
2ページ目にあります"
"SHOW"はdivを含むことを示し、 "HIDE"はiframeにreffersを返します。
iframeの「表示」プロパティは、ターゲットになると「なし」に設定されます。
iframeに読み込まれた2ページ目に2つのdivが含まれています。各divにはそのdivを参照するリンクがあります。
各divのCSSルールセットは、「skyblue」から「silver」を対象とするときに背景色を変更します。
Firefoxでは次の順序で最初のページ上のリンクをクリックしてください：
クリックして "DIV 1"。最初の部門は目標を達成し、その背景はシルバー シルバー;
「非表示」をクリックします。 Iframeがターゲティングされ、その "display"プロパティが に "none"に設定されています。
「表示」をクリックします。 Iframeはもはやターゲットに設定されず、その "表示" プロパティは "インライン"にリセットされます。
「DIV 2」をクリックします。 2番目の部門がターゲットとなり、その背景はシルバー となります。最初のdivはターゲティングされなくなり、その背景色の を「skyblue」にリセットする必要があります（これはChromeで実際に起こります）。 でも銀色のままです。
私は仲間にとってうまくいくようです。私はFireFox 24を使用しています。 – Harry
私のオペレーティングシステムはWindows XP SP3です。多分XPでは動作しません。他に何を考えなければならないのか分かりません。 – user2227119
いいえ、私はオペレーティングシステムがここで問題になるはずはないと思います。 FireFoxのどのバージョンを使用していますか？最新のものにアップグレードしてください。 – Harry