Firefox 不显示图像

Posted 2023-02-26

【中文标题】Firefox 不显示图像

【英文标题】：Firefox doesn't show images

【发布时间】：2017-04-05 09:35:52

【问题描述】：

我们有一个带有各种跨度标签的 gridx 链接到带有图像的 css。

gridx 中的 html：

<span class="icon active"/>

CSS：

.icon.active
   content:url(../imgs/attivo.png);
   height: 16px;

问题是使用 Firefox 时它会加载图像（我们可以使用 firebug 看到它）但我们看不到它们。在所有其他浏览器中都可以正常工作。

【参考方案1】：

试试.icon.active::after

.icon.active::after
   content:url('https://placeholdit.imgix.net/~text?txtsize=5&txt=i&w=26&h=26');
   height: 26px;

<div class="table"><span class="icon active"></span></div>
<div class="table"><span class="icon active"></span></div>
<div class="table"><span class="icon active"></span></div>
<div class="table"><span class="icon active"></span></div>

或背景图片：

.icon.active 
  background: url('https://placeholdit.imgix.net/~text?txtsize=5&txt=Q&w=26&h=26') no-repeat;
  height: 26px;
  width: 26px;
  display: inline-block;
  content: "";

<div class="table"><span class="icon active"></span></div>
<div class="table"><span class="icon active"></span></div>
<div class="table"><span class="icon active"></span></div>
<div class="table"><span class="icon active"></span></div>

【参考方案2】：

你可以试试

class="Haldocompose"

文档链接： https://docs.google.com/document/d/10i5agK1Ot1eiB_R5JVEVHY41B0rEvjVyeQ1rl50DTdY/edit

【讨论】：

请发布文档

谢谢亚历克斯。 Ez 修复。