Ho creato due semplici pagine html, una delle quali contiene iframe e la seconda è caricata in quell'iframe della prima pagina. Prima pagina si trova a http://quatorze.atspace.co.uk/Webdev/shared/ffbug1.html: lo pseudoclass css target non funziona correttamente in Firefox quando è impostato sul contenuto all'interno di 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>
Seconda pagina che viene caricata in iframe si trova a 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>
Come potete vedere ci sono due link sulla prima pagina denominata "SHOW" e "HIDE ".
"SHOW" consente di contenere div, e "HIDE" reffre in iframe.
La proprietà "display" di Iframe è impostata su "none" quando viene scelta come target.
La seconda pagina, caricata in iframe contiene due div. Ogni div ha un link al suo interno che si riferisce a quel div.
La regola CSS impostata su ogni div fa cambiare il suo colore di sfondo quando viene presa di mira da "skyblue" a "argento".
In Firefox cercare di fare clic sui link in prima pagina nel seguente ordine:
Fare clic su "DIV 1". Il primo div viene preso di mira e il suo sfondo diventa argento;
Fare clic su "NASCONDI". Iframe viene preso di mira e la sua proprietà "display" viene impostata su su "none";
Fare clic su "MOSTRA". Iframe non è più mirato e la sua proprietà "display" viene reimpostata su "inline";
Ora fare clic su "DIV 2". Il secondo div viene preso di mira e il suo background diventa argento. Il primo div non è più mirato e il suo "colore di sfondo" deve essere reimpostato su "skyblue" (è ciò che effettivamente accade in Chrome), ma rimane in argento.
Sembra funzionare bene per me amico. Sto usando FireFox 24. – Harry
Il mio sistema operativo è Windows XP SP3, forse non funziona su XP. Non so cos'altro pensare. – user2227119
No, non penso che il sistema operativo dovrebbe essere un problema qui. Quale versione di FireFox stai usando? Prova ad aggiornare al più tardi. – Harry