内容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被打印出来。请帮忙:)内容url在Firefox浏览器上不显示图像

来源

2013-07-28 user2625152

我不认为你可以使用'内容'这种方式。改用“背景”。 – putvande

检查是否有帮助：http://stackoverflow.com/questions/12262118/content-url-is-not-working-in-firefox – Harry

content房产适用::before和::after。如果指定了DOCTYPE是 http://www.htmldog.com/reference/cssproperties/content/

IE8只支持content属性：

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

阅读本。

来源

2013-07-28 11:50:53

在Firefox中，：之前没有为我工作，但：之后，据报道通过Ahetesum Ali – CyberMonk

你必须写两个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; 

}

及其作品对我来说:)

来源

2014-03-27 08:34:32 DropAndTrap

对我来说没什么。火狐浏览器和IE浏览器 - 没有反应 –

在我的情况：在伪元素得到Firefox渲染后，但不是：在 – icelava

之前我不是一个expart在css刚刚发现上面的答案后改变之前到它工作 – DropAndTrap

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

我看着它，不知怎么的URL不是有效的“内容”类型，甚至寿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; 
}

编辑：忘了放：类名

来源

2014-06-12 13:12:42 0MBB0

这是解决方案，应标记为答案。出于某种原因，某些浏览器不接受url作为内容。 –

在这不起作用之后还有什么可尝试的吗？ – ArtforLife

不起作用！ – TetraDev

在整个所有的Web浏览器处理图像的最佳方式前后是使用背景CSS属性的背景大小。但是，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; 
}

来源

2014-09-23 13:07:45 Romain

-4

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

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

来源

2015-02-24 11:32:26

最近我有同样的问题，上述工作没有任何解决方案，为我。我采取了以下解决方法。

我包括引导在我的项目，并利用其img-responsive类。之后，我只需使用<img class="img-responsive">标签包含图像。它可以在每个浏览器和每个视口尺寸上进行精美的显示和缩放。

但愿这是有帮助的人。

来源

2016-04-28 14:50:27 ArtforLife

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

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

来源

2017-05-05 14:16:32 SrAxi

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

回答

相关问题