图标字体在IE11中表现异常 [英] Icon font behaving strangely in IE11

问题描述

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

I'm having a strange issue with an icon font misbehaving in IE... specifically, it seems that the browser is showing the icon associated with the lower-case character instead of the upper-case character. The characters in question are being specified in CSS using the content property of :before selectors.

例如，如果我们有CSS，例如:

For example, if we have CSS like:

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

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

和类似HTML的

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

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

we see the icon-1 icon instead of the icon-2 icon.

有人对这可能如何发生有任何建议吗?图标字体在其他浏览器中可以正常运行，甚至可以在我的VM版本的IE中正常运行.我只能使用同事的Windows笔记本电脑来重现此内容.

Does anyone have any suggestions as to how this could be happening? The icon font behaves correctly in other browsers, and even works correctly in my VM version of IE. I was only able to reproduce this using a colleague's Windows laptop.

编辑:这是在IE11 Windows 8.1上发生的.

This is happening on IE11, Windows 8.1.

刚刚发现了这一点，这可以解释其行为:

Edit 2: Just found this, which may explain the behavior:

推荐答案

显然，当IE查看CSS时，它将忽略大小写.但是，您可以添加文本转换属性来解决此问题.

Apparently when IE looks at CSS it ignores the casing. You can however add a text-transform property to fix the issue.

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

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

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

That should make the second one be uppercase and appear correctly on each browser.

这篇关于图标字体在IE11中表现异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！