के अंदर सामग्री पर सेट है, मैंने दो सरल HTML पेज बनाए हैं, जिनमें से एक आईफ़्रेम है और दूसरा पृष्ठ पहले पृष्ठ के उस आईफ़्रेम में लोड किया गया है। प्रथम पृष्ठ http://quatorze.atspace.co.uk/Webdev/shared/ffbug1.html: लक्ष्य css pseudoclass फ़ायरफ़ॉक्स में ठीक से काम नहीं करता है जब यह 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>
दूसरा पेज कि iframe में लोड किया जाता है 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>
पर स्थित है आप "दिखाएं" और "छुपाएं नामित प्रथम पृष्ठ पर दो लिंक देखते हैं देख सकते हैं पर स्थित है "।
"दिखाएं" div को शामिल करने के लिए संदर्भित करता है, और "छुपा" iframe पर reffers।
इफ्रेम की "डिस्प्ले" संपत्ति लक्षित होने पर "कोई नहीं" पर सेट की जाती है।
आईफ़्रेम में लोड किया गया दूसरा पृष्ठ दो divs है। प्रत्येक div में इसके अंदर एक लिंक होता है जो उस div को संदर्भित करता है।
प्रत्येक div पर सेट सीएसएस नियम इसे "आकाशगंगा" से "चांदी" तक लक्षित होने पर अपने पृष्ठभूमि रंग को बदल देता है।
पर क्लिक करें "DIV 1":
Firefox में निम्न क्रम में पहले पृष्ठ पर लिंक पर क्लिक करने के लिए प्रयास करें। पहला div लक्षित हो जाता है और इसकी पृष्ठभूमि चांदी बदल जाती है;
"छुपाएं" पर क्लिक करें। Iframe लक्षित हो जाता है और इसकी "प्रदर्शन" संपत्ति को "none" पर सेट की जाती है;
"दिखाएं" पर क्लिक करें। Iframe अब लक्षित नहीं है और इसकी "प्रदर्शन" संपत्ति "इनलाइन" पर रीसेट हो गई है;
अब "DIV 2" पर क्लिक करें। दूसरा div लक्षित हो जाता है और इसकी पृष्ठभूमि चांदी बदल जाती है। पहला div अब लक्षित नहीं है और इसकी "पृष्ठभूमि-रंग" को "skyblue" (वास्तव में क्रोम में वास्तव में होता है) पर रीसेट किया जाना चाहिए, लेकिन यह चांदी बना हुआ है।
ऐसा लगता है कि मेरे साथी के लिए ठीक काम कर रहा है। मैं फ़ायरफ़ॉक्स 24 का उपयोग कर रहा हूँ। – Harry
मेरा ऑपरेटिंग सिस्टम विंडोज एक्सपी एसपी 3 है, शायद यह एक्सपी पर काम नहीं करता है। मुझे नहीं पता कि और क्या सोचना है। – user2227119
नहीं, मुझे नहीं लगता कि ऑपरेटिंग सिस्टम यहां एक मुद्दा होना चाहिए। आप फ़ायरफ़ॉक्स का किस संस्करण का उपयोग कर रहे हैं? नवीनतम में अपग्रेड करने का प्रयास करें। – Harry