为什么 Firefox 不使用 CSS `content: url()` 显示图像？-css教程-PHP中文网

为什么 Firefox 不使用 CSS `content: url()` 显示图像？

Patricia Arquette

发布： 2024-12-11 08:03:15

原创

971 人浏览过

Why Doesn't Firefox Display Images Using CSS `content: url()`?

Firefox 不显示使用内容 URL 声明的图像

在 CSS 样式的上下文中， content 属性用于在之前或之后添加内容一个元素。然而，当使用 content 属性在 Firefox 中显示图像，而它在 Google Chrome 等其他浏览器中无缝运行时，会出现一个常见问题。

考虑以下用于将图像添加到元素的 CSS 类：

.googlePic {
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float: right;
    height: 19px;
}

登录后复制

当此类应用于元素时，图像不会在 Firefox 中显示。要解决此问题，必须将 content 属性与 ::before 或 ::after 伪元素结合使用。通过将图像声明包装在 ::before 伪元素中，Firefox 将正确显示图像。

.googlePic::before {
    content: url('../../img/googlePlusIcon.PNG');
}

登录后复制

需要注意的是，在 IE8 中，仅当 !DOCTYPE 为已指定。

以上是为什么 Firefox 不使用 CSS `content: url()` 显示图像？的详细内容。更多信息请关注PHP中文网其他相关文章！