首页 >web前端 >css教程 >为什么 Firefox 不使用 CSS `content: url()` 显示图像?

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

Patricia Arquette
Patricia Arquette原创
2024-12-11 08:03:151016浏览

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn