IE 和 Edge 不尊重文本转换

Question

我有以下情况我无法解释但微软浏览器的错误......

我有一个符号字体，并使用不同的字母来显示符号。例如，“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 代码而不是字母。这意味着，即使 有缺陷的 Microsoft 浏览器 将符号小写，它们也不能将大写代码字母小写。

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