firefox - Firefox 不显示图像

Question

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

网格中的 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>

或背景图像：

.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