css - 在 Firefox 中, `a:before` 的不透明度被 `a` 覆盖

标签 css google-chrome firefox pseudo-element

我有一个链接。我正在使用 :before 在它前面放置一个图标。最初,文本是不可见的 (opacity: 0),而图标是可见的 (opacity: 1)。悬停后,文本将变为可见。我使用不透明度而不是可见性或显示,因为我需要它来使用过渡属性。

我发现我可以在 Chrome 中通过将 :before 元素设置为 display:block 来做到这一点(没有这个,它拒绝具有不同于链接的其余部分)。不幸的是,我还发现即使添加了这个,Firefox 也不会让它的不透明度不同于链接的其余部分。

可以查看我使用此效果的页面here (这是 codepen source ),但我已将问题归结为最简单的形式并在下面重现。

jsFiddle

a {
    opacity: 0.5;
}
a:before {
    display: block;
    float: left;
    opacity: 1;
    content: "+";
}
<a href="#">Sample Text</a>

如您所见,在 Chrome 中(我在 RPM Linux 上使用 v37.0 x64),加号是完全不透明的,而文本是部分透明的。这是预期的行为。然而,在 Firefox 中(我在 RPM Linux 上使用 v31.0 x64),整个事情是部分透明的。

我应该提一下,我的元素有一些规定限制了我在这里的选择。首先,我无法更改 HTML,因为它都是从荒谬的通用 markdown 生成的。其次,我没有使用图像。不过,从好的方面来说,我不需要支持旧版浏览器。

哪个浏览器的实现是“正确的”?有没有更好的方法来达到我描述的效果?如果没有更强大的解决方案,是否有解决方法?

最佳答案

:before 伪元素实际上在您应用它的元素内部呈现,因为它旨在作为元素内容之前的内容。

opacity 也会在所有子元素上继承,因此您必须更改您的标记以使该元素实际位于您的 div 之外。 在 http://www.w3.org/TR/css3-color/#transparency 上阅读有关透明度规范的信息

或者您可以使用 rgba() 来设置文本的颜色 - 当然这种方法仅在您处理背景或文本颜色时有效,但至少在跨浏览器中是一致的。

您在 Firefox 中遇到的行为可能是 Firefox 错误,因为其他浏览器呈现与 chrome 相同的结果(经过测试的 chrome、opera 和 internet explorer 具有相同的结果)。

a {
    color:rgba(0,0,0,0.5);
    font-size:60px;
    font-weight:bold
}
a:before {
    display: block;
    float: left;
    opacity: 1;
    content: "+";
    color:rgba(0,0,0,1);

}
<a href="#">Sample Text</a>

关于css - 在 Firefox 中, `a:before` 的不透明度被 `a` 覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25920869/

相关文章:

javascript - Firefox 11 安全错误?如何追踪它

javascript - 在 Firefox SDK main.js 中获取某些文件的内容

c# - 关闭 Firefox 后 ASP.NET 身份验证 cookie 不会删除

html - 如何创建这种平铺页面布局?

html - 最新 Chrome 和 Flexbox 的问题/溢出

google-chrome - Chrome 不尊重主机文件条目

google-chrome - 在控制台窗口中隐藏警告消息

javascript - 如何 document.querySelectorAll 内联 css 样式?

html - 网格内的 CSS 位置粘性侧边栏

html - 固定将 Div 的顶部定位到父 div 的底部