CSS定义的img.wink类图片在Chrome显示正常，Firefox不显示求助

这个问题其实是浏览器对CSS content 属性的实现差异导致的——Firefox严格遵循CSS规范，content 属性原本是为伪元素（比如 ::before/::after）设计的，并不支持直接在 <img> 这个替换元素上生效；而Chrome和Safari在这方面做了非标准的兼容，所以能正常显示。

方案1：用伪元素模拟图片（推荐，符合规范） #

把 <img> 替换成普通行内/块级元素（比如 <span>），通过伪元素加载图片，所有浏览器都能兼容：

<span class="wink"></span>

span.wink {
  display: inline-block; /* 让元素支持宽高设置 */
  width: 20px; /* 根据你的图片实际尺寸调整 */
  height: 20px;
}
span.wink::before {
  content: url(data:image/gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=);
}

方案2：直接给img设置src属性（最直接） #

既然是图片，最标准的做法就是把base64编码直接放在 <img> 的 src 属性里，完全符合规范，兼容性拉满：

<img class="wink" src="data:image/gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=" alt="wink">

这种方式不需要额外的CSS content 样式。

方案3：用background-image替代 #

如果一定要用CSS控制图片显示，可以将图片设为元素的背景图：

<span class="wink"></span>

span.wink {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(data:image/gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=);
  background-size: contain;
  background-repeat: no-repeat;
}

内容的提问来源于stack exchange，提问作者tsar2512