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

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

这是我的css文件中我的类googlePic一个例子。 它工作和打印出很好的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

你必须在风格上写两个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 3

我知道这可能是一个迟到的反应，但我遇到了同样的问题。

我查了一下，以某种方式一个url是不是一个有效的“内容”types，即使是Chrome和Safari是好人，并很好地显示它。

什么为我工作，创造一个空的“内容”，并使用背景来显示图像：它适用于Chrome，火狐，Safari和IE8 + 9

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

编辑：忘了把：之前的类名

Answer 4

在所有网页浏览器中处理图像的最佳方式是使用背景大小的背景CSS属性。 不过，IE8及以下版本将不支持它（占2014年浏览器的2％），

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

Answer 5

我最近有同样的问题，上面的解决scheme都没有为我工作。 我采取了以下解决方法。

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

希望这对某人有帮助。

Answer 6

这救了我。 请记住要从img删除alt属性，否则您将在Firefox中findalt和实际图像。

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

Answer 7

您可以尝试将高度和宽度设置为0，添加填充和设置背景图像。 您必须使其显示：block或display：inline-block才能使高度生效。

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