Html 图标字体在IE11中表现异常

我有一个奇怪的问题，图标字体在IE中出现错误。。。具体来说，浏览器似乎显示了与小写字符而不是大写字符关联的图标。正在使用

：before

选择器的

content

属性在CSS中指定有问题的字符

例如，如果我们有如下CSS：

.icon-1:before {
    content: 'o';
}

.icon-2:before {
    content: 'O';
}

和HTML类似：

<div class='icon-2'></div>

我们看到的是图标1图标，而不是图标2图标

有人对如何发生这种情况有什么建议吗？图标字体在其他浏览器中可以正常工作，甚至在我的虚拟机版IE中也可以正常工作。我只能使用同事的Windows笔记本电脑来复制它

编辑：这发生在IE11、Windows 8.1上

编辑2:刚刚发现了这一点，这可能解释了以下行为：

---

显然，IE在查看CSS时忽略了外壳。但是，您可以添加文本转换属性来解决此问题

.icon-1:before {
    content: 'o';
}

.icon-2:before {
    content: 'O';
     text-transform: uppercase;
}

---

这应该使第二个版本大写，并正确显示在每个浏览器上。

具体来说，您对哪个版本的IE有问题？有趣的效果-我猜是旧版本的IE不支持伪元素。我已经找了半天的这个解决方案。直到我用fontforge打开字体，我才看到小写字母和大写字母之间的区别！