内容网址不会在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/

如果指定了！DOCTYPE，IE8仅支持content属性。

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及更低版本将不支持它(represent 2% of viewer in 2014)

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

Answer 5

这救了我。记得从alt中删除img属性，否则你会在Firefox中找到alt和实际图像。

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

Answer 6

我最近遇到了同样的问题，上面没有一个解决方案适合我。我采取了以下解决方法。

我在我的项目中包含了Bootstrap并使用了它的img-responsive类。之后，我只需使用<img class="img-responsive">标签包含图像。它在每个浏览器和每个视口大小上显示和缩放。

希望这对某人有帮助。

Answer 7

我遇到了同样的问题，在我的情况下，我无法使用内容显示图像：url（）。我想在一个div中显示等待的gif。我不知道Mozilla支持的细节。但是在我的情况下通过以下代码解决了这个问题。

background-img property with background-size: contain(compulsory)
.img_div{background-image: url("wait.gif");height: 20px;width: 20px;background-size: contain;border:none;}

它适用于Chrome 73和Firefox 66。

Answer 8

您可以尝试将高度和宽度设置为0，添加填充并设置背景图像。您必须使其显示：阻止或显示：内联块以使高度生效。

这是一个例子： http://jsfiddle.net/zBgHd/1/