Stworzyłem dwie proste strony HTML, z których jedna zawiera element iframe, a druga jest ładowana do tego elementu iframe pierwszej strony. Pierwsza strona znajduje się na http://quatorze.atspace.co.uk/Webdev/shared/ffbug1.html: pseudoklasa docelowego css nie działa poprawnie w Firefoksie, gdy jest ustawiony na zawartość wewnątrz iframe
<!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>
drugiej strony, który jest ładowany w iframe znajduje się 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>
Jak widać istnieją dwie linki na pierwszej stronie o nazwie „show” i „HIDE ".
"POKAŻ" odpowiada na zawierające div, a "UKRYJ" odpowiada iframe.
Właściwość "display" Iframe jest ustawiona na "none", gdy zostanie trafiona.
Druga strona, która jest załadowana w ramce iframe, zawiera dwa elementy div. Każdy div ma w sobie odnośnik, który odnosi się do tego div.
Reguła CSS ustawiona dla każdego elementu div powoduje, że zmienia kolor tła, gdy zostanie zmieniony z "skyblue" na "srebrny".
W Firefox klikam linki na pierwszej stronie w następującej kolejności:
Kliknij "strefa 1". Pierwszy div zostaje celowany, a jego tło zmienia się w srebro: ;
Kliknij "UKRYJ". Element iframe jest kierowany, a jego właściwość "display" jest ustawiona na na "none";
Kliknij "POKAŻ". Element iframe nie jest już kierowany, a jego właściwość "display" jest resetowana do "inline";
Teraz kliknij "DIV 2". Drugi div zostaje trafiony, a jego tło zamienia się w srebro o wartości . Pierwszy element div nie jest już celem, a jego "kolor tła" musi zostać zresetowany do "skyblue" (tak właśnie dzieje się w Chrome), , ale pozostaje srebrny.
Wygląda na to, że działa dobrze dla mnie kolego. Używam FireFox 24. – Harry
Mój system operacyjny to Windows XP SP3, może nie działa na XP. Nie wiem, co jeszcze myśleć. – user2227119
Nie, nie sądzę, że system operacyjny powinien być tutaj problemem. Jakiej wersji FireFox używasz? Spróbuj uaktualnić do najnowszego. – Harry