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

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

Patricia Arquette
发布: 2024-12-11 08:03:15
原创
958 人浏览过

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板