Иконка шрифта ведет себя странно в IE11

Question

У меня странная проблема с неправильным поведением шрифта значка в IE... в частности, кажется, что браузер показывает значок, связанный с символом нижнего регистра вместо символа верхнего регистра. Указанные символы указываются в CSS с использованием content собственностью :before селекторы.

Например, если у нас есть CSS как:

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

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

и HTML как:

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

мы видим значок icon-1 вместо значка-2.

У кого-нибудь есть предложения относительно того, как это может происходить? Шрифт значка работает правильно в других браузерах и даже корректно работает в моей версии 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, он игнорирует регистр. Однако вы можете добавить свойство text-transform, чтобы исправить проблему.

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

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

Это должно сделать второй в верхнем регистре и правильно отображаться в каждом браузере.