：目标css伪类不'；当Firefox'；在iframe内的内容上设置_Css_Firefox_Pseudo Class

：目标css伪类不'；当Firefox'；在iframe内的内容上设置

css firefox

：目标css伪类不'；当Firefox'；在iframe内的内容上设置,css,firefox,pseudo-class,Css,Firefox,Pseudo Class,我创建了两个简单的html页面，其中一个包含iframe，第二个加载到第一个页面的iframe中。第一页位于：firefox中的目标bug iframe：目标{ 显示：无； } ol{ 最大宽度：480px；字体系列：无衬线； } 李{ 利润率：8px； } 跨度{ 颜色：红色； } 在Firefox中，按以下顺序单击此页面上的链接：单击“DIV 1”。第一个div成为目标，背景变成银色单击“隐藏”。Iframe成为目标，其“display”属性设置为“none” 单击“显示”。I

我创建了两个简单的html页面，其中一个包含iframe，第二个加载到第一个页面的iframe中。第一页位于


：firefox中的目标bug
iframe：目标{
显示：无；
}
ol{
最大宽度：480px；
字体系列：无衬线；
}
李{
利润率：8px；
}
跨度{
颜色：红色；
}

在Firefox中，按以下顺序单击此页面上的链接：
单击“DIV 1”。第一个div成为目标，背景变成银色
单击“隐藏”。Iframe成为目标，其“display”属性设置为“none”
单击“显示”。Iframe不再是目标，其“display”属性重置为“inline”
现在点击“div2”。第二个div成为目标，背景变成银色。First div不再是目标，其“背景色”必须重置为“天蓝色”，但仍为银色
单击“DIV 1”。第一个div成为目标，它的背景已经是银色的，第二个div不再是目标，它的“背景色”被重置为“天蓝色”
单击“第2部分”。第二个div成为目标，其背景变为银色，第一个div不再成为目标，其“背景色”重置为“天蓝色”
单击“隐藏”。Iframe成为目标，其“display”属性设置为“none”
单击“显示”。Iframe不再是目标，其“display”属性重置为“inline”
现在单击“div1”。第一组被锁定，背景变成银色。第二个div不再是目标，它的“背景色”必须重置为“天蓝色”，但它仍然是银色的。

在iframe中加载的第二个页面位于


：firefox中的目标bug
div{
宽度：140px；
高度：140像素；
边框：2倍实心；
利润率：6px；
填充：10px；
背景色：天蓝色；
浮动：左；
}
分区：目标{
背景颜色：银色；
}

如您所见，第一页上有两个名为“显示”和“隐藏”的链接

“显示”参照引用到包含div，“隐藏”参照引用到iframe

当Iframe成为目标时，它的“display”属性被设置为“none”

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

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

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

单击“DIV 1”。第一个div成为目标，背景变了银

单击“隐藏”。Iframe成为目标并设置其“display”属性 “无”

单击“显示”。Iframe不再是目标及其“显示” 属性重置为“内联”

现在点击“div2”。第二个div成为目标，背景变了西尔弗。第一个div不再是目标及其“背景色” 必须重置为“天蓝”（这是Chrome中实际发生的情况），但它仍然是银色的

这可能不是你想要的答案，但它是一个实际的答案

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

因为您似乎已经正确地应用了样式，如果您在一个浏览器中而不是在另一个浏览器中获得了正确的功能，那么您只需将精力投入到寻找一种在这两种浏览器中都有效的通用方法上

即使Firefox能帮你修复这个bug，你仍然会有访问者在很长一段时间内遇到它。

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

这对我来说似乎很好，伙计。我使用的是FireFox 24。我的操作系统是Windows XP SP3，可能它在XP上不工作。我不知道还能想些什么。不，我不认为操作系统应该成为这里的一个问题。您使用的是什么版本的FireFox？尝试升级到最新版本。我正在使用Firefox24，这是最新版本。您确定按与指定完全相同的顺序单击了链接吗？我禁用了所有插件和扩展，但也没有任何帮助：(

<!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>

<!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>