图标在 IE11 上消失了答案

【问题标题】：Icon dissapeared on IE11图标在 IE11 上消失了
【发布时间】：2021-06-17 11:08:54
【问题描述】：

我在使用 IE11 的 html 上看不到一些图标。这是图标的css代码

.icon_sms:before {
    display: block;
    content: '';
    height: 8em;
    width: 8em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-image:
        url([...]);
}

我也试过display: inline-block，但它也不起作用。

还有no-cache html 头部属性

还有 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 在头上的第一个属性上

有什么建议吗？

非常感谢

最好的问候

【问题讨论】：

标签： html css icons internet-explorer-11

【解决方案1】：

我认为你不能在 IE11 中使用伪元素。要了解您可以在每个浏览器中使用哪些技术，我推荐网络 caniuse。很多技术都很清楚。

您可以在这个link 中看到接受before 伪元素的浏览器。希望对你有用。

【讨论】：

【解决方案2】：

根据你的描述和你提供的代码，我做了一个简单的测试，发现在IE11下可以正常使用。

一个简单的测试：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style>
        .icon_sms:before {
            display: block;
            clear: both;
            content: '';
            height: 40em;
            width: 40em;
            vertical-align: middle;
            background-repeat: no-repeat;
            background-image: url(https://i.stack.imgur.com/UzYKM.gif);
        }
    </style>
</head>
<body>
    <div class="icon_sms" style="border:1px solid red">some text</div>
</body>
</html>

因为您还没有发布图片 url 和任何 html 代码。我猜可能是因为之前样式中的尺寸不够大，无法显示图像。尝试修改示例中的高宽为8em，不显示。

如果你能贴出相关完整的例子，将有助于解决问题，谢谢你的理解。

【讨论】：

你好徐东！非常感谢您的回复。 bckg-image 是这样的 svg/xml： url("data:image/svg+xml,%3Csvg xmlns='w3.org/2000/svg' style='overflow: visible;position: absolute;left: -15px;top: -5px;'%3E%3Cpath .../%3E%3C/svg%3E");我尝试使用 base64 字符串而不是编码 xml，但它不起作用
另外，我已经用那个 url 图像测试了我的 css，但它也不起作用。我看不到图标。也许是关于css文件之前的东西
@JLopez 你看到我的答案了吗？
嗨@JLopez，你检查过浏览器控制台吗？我使用了您提供的网址并收到错误消息：非法限定名称字符。一个类似的案例：SVG data image not working as a background-image in a psuedo element所以我不确定你转换的格式是否正确，我尝试使用base64格式，它也可以正常工作，你可以使用一些工具轻松获取base64数据。例如：@987654323 @
大家好！非常感谢您的回复。关键是 svg 文件的标题，有些元素不适用于 IE11。所以我删除了这个标题，现在我可以正确看到图标了！