圖片作爲背景，跨度不渲染

Question

我有下面的類

.stats { 
    content: url('images/stats.gif'); 
    background-repeat: no-repeat; 
    width: 23px; 
    height: 20px; 
    float: right; 
} 

及以下跨度

<span class="stats" ng-click="showTabDialog(player)"></span> 

這使得罰款，Chrome，但我沒有看到在IE11的形象，即使我可以點擊圖像應該在的地方，它可以正常工作

爲什麼我在IE中看不到圖像？

Answer 1

爲什麼你有content: url('images/stats.gif')？ content CSS屬性僅適用於僞元素::before和::after。我建議嘗試將其設置爲背景圖像：

.stats { 
 
    background-image: url('http://onlywm.ru/vbfs_aBlackRed/misc/stats.gif'); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    width: 23px; 
 
    height: 20px; 
 
    float: right; 
 
}

<span class="stats" ng-click="showTabDialog(player)"></span>

Answer 2

內容 CSS屬性只能與::之前和之後::僞元素：

https://developer.mozilla.org/en-US/docs/Web/CSS/content

Chrome不尊重這方面的規範。

您應該使用背景圖像。

Answer 3

將display-block添加到您的CSS。 background-image CSS屬性僅將圖像作爲背景。對象的寬度和高度總是通過CSS /內聯樣式的靜態設置或其中顯示的內容的實際大小來定義。在你的情況，因爲你還沒有加入您的標記之間的任何內容，其X/Y尺寸將是0

.stats { 
    width: 23px; 
height: 20px; 
    background-image: url('http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg') ; 
    background-repeat: no-repeat; 
    display: block; 
    float : right; 
} 

JSFIDDLE