图像作为跨度中的背景未呈现

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

content CSS 属性仅适用于 ::before 和 ::after 伪元素：

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

Answer 4

css 中用于渲染图像的三个必需属性（背景图像除外）：

height: 40px; //change size as needed
width: 40px; //change size as needed
display: block; //Tend to miss this one out

如果没有高度和宽度，如果你的资源需要时间来渲染，元素将不会被分配一个区域空间。 没有显示：块，图像只存在于背景中。 （在发现这个微妙的错误之前尝试了太多的东西）。

其他属性是可选的，需要根据您定位图像的要求而定。