:当在iframe中的内容上设置时,目标css伪类在Firefox中无法正常工作

Question

:当在iframe中的内容上设置时,目标css伪类在Firefox中无法正常工作

我创建了两个简单的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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

如您所见,第一页上有两个名为"SHOW"和"HIDE"的链接.

"SHOW"表示包含div,"HIDE"表示iframe.

当iframe的"display"属性被定位时,它被设置为"none".

第二页,在iframe中加载包含两个div.每个div都有一个链接,指向该div.

每个div上设置的CSS规则使它在从"skyblue"到"silver"的目标时改变其背景颜色.

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

单击"DIV 1".第一个div成为目标,其背景变为银色;
点击"隐藏".iframe被定位,其"display"属性设置为"none";
点击"显示".iframe不再被定位,其"display"属性被重置为"inline";
现在点击"DIV 2".第二个div成为目标,其背景变为银色.第一个div不再是目标,它的"背景颜色"必须重置为"天蓝色"(这是Chrome中实际发生的事情),但它仍然是银色的.

Answer 1

小智 -1

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

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

由于您似乎已经正确应用了样式，因此如果您在一种浏览器中获得了正确的功能，而在另一种浏览器中却没有，那么您只需花精力寻找一种适用于两种浏览器的通用方法即可。

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

归档时间：	12 年，5 月前
查看次数：	517 次
最近记录：	11 年，9 月前