HTML css图像类显示在Chrome中，而在Firefox中不显示
HTML css图像类显示在Chrome中，而在Firefox中不显示
提问于 2018-03-31 13:02:07
我正在生成一个html，其中我有一个图像类，如图所示。我可以在chrome/safari中正确地查看图像。但是，当文本显示在Firefox中时，图像没有显示
我说的不对，意思是图像没有显示
img.wink {
content: url(data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=);
}<h1>Hello</h1>
<img class="wink" />
I am not insane
编辑：
好的，在@joshadam响应之后，我似乎不得不使用另一种方式来支持firefox/chrome。有没有一种简单的方法可以对两者都有效呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-03-31 13:26:14
我认为img不是在等待内容，而是对于src，您可以尝试这个技巧。
img.wink,
img.wink::after {
content: url(data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=);
}
.wink {
display: inline-block;
background: url(data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=) no-repeat left center;
width: 20px;
height: 20px;
}<h1>Hello</h1>
<span class="wink"></span>
<br/>
I am not insane
Stack Overflow用户
发布于 2018-03-31 13:09:56
需要添加：：后为火狐或有时：：之前取决于版本：https://css-tricks.com/almanac/selectors/a/after-and-before/
/*firefox*/
img.wink::after {
content: url(https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png);
}
/*chrome*/
img.wink {
content: url(https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png);
height:10px;
width: 10px:
}<h1>Hello</h1>
<img class="wink" />
<br/>
I am not insane <img class="win ab" width = "30px" />
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49588047
复制相关文章
相似问题
腾讯云开发者
