图标字体在IE11中表现得很奇怪

Question

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

例如，如果我们有像：

这样的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：刚刚找到了这个，这可以解释这种行为：

http://www.browserquirks.org/blog/2014/04/02/css-content-rule-is-not-case-sensitive-in-ie8-plus/

Answer 1

显然当IE浏览CSS时它忽略了外壳。但是，您可以添加文本转换属性来解决问题。

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

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

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