html - 图标字体在 IE11 中表现异常

Question

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

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

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

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

和 HTML 类似:

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

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

有没有人对这种情况如何发生有任何建议？图标字体在其他浏览器中表现正常，甚至在我的 IE VM 版本中也能正常工作。我只能使用同事的 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;
}

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