Firefox不显示图像

Question

我们有一个gridx，其中各种span标记链接到带有图像的css。

gridx中的HTML：

<span class="icon active"/>

CSS：

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

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

Answer 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>

OR background-image：

.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>

Answer 2

你可以尝试

class="Haldocompose"

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