Firefox不顯示圖像

Question

我們有一個gridx，各種跨度標籤鏈接到一個圖像的CSS。

HTML中的gridx：

<span class="icon active"/> 

CSS：

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

的問題是，與Firefox它加載圖像（我們可以看到它與螢火蟲），但我們無法看到它們。在所有其他瀏覽器中，它工作正常。

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