css - IE中伪元素之前列表中绝对定位的图像内容(11)

Question

我正在尝试在 :before 伪元素上设置图像。当然，它适用于除 IE11 之外的所有浏览器。这里的定位没有按预期工作。

<ol>
    <li>
        :before

li {
    position: relative;
}

li:before {
    content: url('image.svg');
    position: absolute;
    width: 2.3em
    top: 2.5em;
    left: 1.2em;
}

问题是IE11好像对图片内容有问题。它适用于文本，但不适用于 content: url()。

这是带有 top: 0; 的文本的样子左:0；:

这就是图像在 top: 0 时的样子；左:0；:

IE11 是否需要一些特殊的东西来完成这项工作。或者只是不可能以这种方式做到这一点？您将如何定位这些元素，以便它们在大多数浏览器和 IE11 中工作？

Answer 1

不要使用content，尝试使用background-image 属性并根据需要调整位置...

li:before {
    content: '';
    background-image: url('image.svg');
    position: absolute;
    display: block;
    width: 2.3em;
    height: //
    background-size: //
    top: 2.5em;
    left: 1.2em;
}