IE和Edge不尊重文本转换

Question

以下情况我无法解释，但是Microsoft浏览器的错误...

我有一种符号字体，并使用不同的字母来显示符号。例如，“ z”字母表示“减小字体大小”符号，而“ Z”表示“增大字体大小”一个...

但是Microsoft浏览器将我的字母小写，并且Edge和IE中我有相同的“ z”，但是在普通浏览器中是正确的行为。

可以在here（在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代码而不是字母。这意味着，即使 Buggy Microsoft浏览器将符号小写，它们也不能将大写字母小写。

例如而不是使用content: "Z"，我会使用content: "\005A"而不是content: "z" => content: "\007A" 在这种情况下，即使是“不良”的Microsoft浏览器（Edge和IE）也会显示正确的大小写字符。