Question

我正在生成一个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

编辑：

确定跟进@joshadams响应似乎我必须使用不同的方式来支持firefox / chrome。有一种简单的方法可以兼顾两者吗？

Answer 1

需要为firefox添加:: after，有时需要::依赖于版本：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" />

Answer 2

我认为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

HTML css图像类显示在Chrome中，但不显示在Firefox中

2 个答案: