6

我创建了两个简单的 html 页面，其中一个包含 iframe，第二个加载到第一页的 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>

如您所见，第一页上有两个链接，分别名为“SHOW”和“HIDE”。

“SHOW”是指包含 div，“HIDE”是指 iframe。

当 iframe 被定位时，它的“display”属性设置为“none”。

在 iframe 中加载的第二页包含两个 div。每个 div 内部都有一个指向该 div 的链接。

每个 div 上设置的 CSS 规则使其在目标从“天蓝色”变为“银色”时更改其背景颜色。

在 Firefox 中，尝试按以下顺序单击第一页上的链接：

  1. 单击“DIV 1”。第一个 div 被定位，它的背景变成银色；

  2. 单击“隐藏”。iframe 被定位并且其“显示”属性设置为“无”；

  3. 点击“显示”。iframe 不再被定位，其“display”属性被重置为“inline”；

  4. 现在单击“DIV 2”。第二个 div 成为目标，其背景变为银色。第一个 div 不再是目标，它的“背景颜色”必须重置为“天蓝色”（这就是 Chrome 中实际发生的情况），但它仍然是银色。

4

2 回答 2

-1

你应该试试jquery，我相信它会做得很好。我在你的代码中运行 chrome，没问题。出现你说的问题在firefox，你可以点击它会显示div1，div2重置为蓝色。你试试，希望能帮到你。

于 2014-06-09T13:54:28.683 回答
-1

这可能不是您正在寻找的答案，但它是一个实用的答案。

如果您正在尝试为您的项目实现跨浏览器兼容性，那么您应该寻找每个浏览器都做得好的功能子集，并使用它。

由于您似乎已经正确应用了样式，如果您在一个浏览器中而不是另一个浏览器中获得了正确的功能，您只需要集中精力寻找一种在这两种浏览器中都有效的通用方法。

即使 Firefox 会为您修复此错误，您仍然会有访问者在很长一段时间内遇到它。

于 2013-10-12T16:03:36.897 回答