图标字体在IE11中的奇怪行为

Question

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

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

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

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

和HTML类似：

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

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

有没有人对这种情况的发生有任何建议？图标字体在其他浏览器中运行正常，甚至在我的IE虚拟机版本中也能正常工作。我只能用同事的Windows膝上型电脑来再现这一切。

编辑：这是发生在IE11上，Windows8.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;
}

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