IE（11）中伪元素之前列表上的绝对定位图像内容答案

【问题标题】：absolute positioned image content on list before pseudo element in IE (11)IE（11）中伪元素之前列表上的绝对定位图像内容
【发布时间】：2017-07-17 22:47:03
【问题描述】：

我正在尝试在 :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; left: 0; 的文本外观：

这是使用top: 0; left: 0; 的图像：

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

【问题讨论】：

您是否尝试将 SVG 添加为 background-image，而不是 content 属性？
我认为我没有这样做是有原因的。但我不记得了。我会试试的。感谢您的建议。
是的，它似乎有效。而且我不记得我为什么使用这些内容。
太好了，很高兴它有帮助
如果您可以将其添加为答案，我可以检查一下：)

标签： css css-position internet-explorer-11 absolute

【解决方案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;
}

【讨论】：