内容CSS以及与IE的兼容性

Question

我插入了一个带有图像的图标。

在Chrome浏览器中，我看到图标

但是在IE图标中消失了。

这是我的CSS

<div class="infoIcon"></div>

.infoIcon {
    content: url('/assets/img/info-sign.png');
    background-color: #919191;
    width:15px;
    border-radius: 8px;
    margin-left:10px;
    display: inline;
    vertical-align: sub
}

Answer 1

您可以使用HTML实体来实现。

"KEBROS PASSWORD :  "

.infoIcon {
    font-size: 40px;
}

Answer 2

在CSS中，“内容”适用于:: before和:: after伪选择器。

关于Chrome为什么显示图像，Chrome多数时候倾向于使用CSS语法。 IE和FireFox没有显示图像，因为它的语法不正确。

编辑： 例 如果要保留“内容”，则必须将内容移动到 。：之前

.icon:before{
content: url('src');
}

但是，您需要将图像缩放到合适的尺寸。 （图标库使用字体，可以轻松更改字体大小）

第二个选项与现在一样继续，但是切换到背景图片

.info{
background-image:url('icon.svg.png');
background-size: 100% 100%;
width:40px;
height: 40px;
}