内容网址不会在Firefox浏览器上显示图像

Question

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

}

这是googlePic我的css文件中的一个示例.它的工作原理并打印出漂亮的google chrome和safari.但是,它不起作用firefox.Nth打印出来.请帮忙 :)

Answer 1

该content物业与::before和::after.

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

阅读:http: //www.htmldog.com/reference/cssproperties/content/

content如果指定了!DOCTYPE,IE8仅支持该属性.

Answer 2

我知道这可能是一个迟到的回应,但我遇到了同样的问题.

我查了一下,不知何故,网址不是一个有效的'内容'类型,甚至Chrome和Safari都是好人并且很好地展示它.

对我有用的是创建一个空的"内容"并使用背景来显示图像:它在Chrome,Firefox,Safari和IE8 + 9中运行良好

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

编辑:忘了把:在classname之后

Answer 3

你必须在风格上写两个css类

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

}

.googlePic: after
{  /*this for firefox browser*/
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

它的作品对我来说:)

Answer 4

在所有 Web 浏览器中处理图像的最佳方法是将 background css 属性与 background-size 一起使用。但是，IE8 及更低版本将不支持它（占 2014 年观众的 2%）

.googlePic{
    background: url('../../img/googlePlusIcon.PNG') -6.5% 53px no-repeat;
    background-size: contain;
    float:right;
    height: 19px;
}