图标字体在 IE11 中表现异常答案

【问题标题】：Icon font behaving strangely in IE11图标字体在 IE11 中表现异常
【发布时间】：2016-01-10 06:27:21
【问题描述】：

我遇到了一个奇怪的问题，即 IE 中的图标字体行为不端...具体来说，浏览器似乎显示的是与小写字符而不是大写字符相关联的图标。有问题的字符是在 CSS 中使用 :before 选择器的 content 属性指定的。

例如，如果我们有这样的 CSS：

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

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

和 HTML 类似：

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

我们看到的是 icon-1 图标而不是 icon-2 图标。

有没有人对如何发生这种情况有任何建议？图标字体在其他浏览器中表现正确，甚至在我的 VM 版本的 IE 中也能正常工作。我只能使用同事的 Windows 笔记本电脑重现这一点。

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

编辑 2： 刚刚找到这个，这可以解释这种行为：

【问题讨论】：

【解决方案1】：

显然，当 IE 查看 CSS 时，它会忽略大小写。但是，您可以添加一个 text-transform 属性来解决此问题。

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

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

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

【讨论】：