IE и Edge не уважают преобразование текста

Question

У меня следующая ситуация, которую я не могу объяснить, но ошибка браузера Microsoft ...

У меня есть символический шрифт, и я использую разные буквы для отображения символов. Например, буква «z» отображает символ «уменьшить размер шрифта», а буква «Z» означает «увеличить размер шрифта» ...

Однако в браузерах Microsoft строчные буквы мои, и в Edge и IE у меня одинаковые буквы "z", но в обычных браузерах это корректно.

Ошибка может наблюдаться здесь (в IE или Edge).

Что я могу сделать, чтобы это исправить?

PS.

Я пытался воспроизвести это в этом фрагменте, но на самом деле работает как исправлено ... Однако в приведенной ниже ссылке ошибка воспроизводится ...

body {
  text-transform: uppercase;
}

span.symbol.a::before {
  content: " <A-xample of UPPERCASE text> ";
}
span.symbol.b::before {
  content: " <B-xample of UPPERCASE text> ";
}

.symbol::before {
  text-transform: none !important;
}

<div>
  this is a text div
  <span class="symbol a"></span>
  <span class="symbol b"></span>
</div>

Answer 1

Единственное (и некрасивое) решение, которое я нашел для этой проблемы, это использовать коды Unicode вместо букв. Это означает, что даже если глючные браузеры Microsoft в нижнем регистре символов, они не могут в нижнем регистре заглавной буквы кода.

К примеру. вместо использования content: "Z" я бы использовал content: "\005A" и вместо content: "z" => content: "\007A" В этом случае даже «плохие» браузеры Microsoft (Edge и IE) отображают правильные символы в регистре.