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

没有高度和宽度，如果您的资源需要花费时间来渲染，则不会为元素分配区域空间。如果不使用display：块，则图像仅存在于背景中。（在发现此细微错误之前尝试了太多事情）。

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

作为背景的图象在没有翻译的范围

4 个答案: