css内容字符渲染奇怪

Question

我使用 :after 伪元素在列表中的每个项目旁边添加一个字符。我目前使用的CSS是：

li:after {
      display: inline-block;
      content: '\25b6';
      color: #dc313a;
      padding-right: 16px;
      padding-left: 6px;
      font-weight: normal;
}

它在 Chrome（大多数情况下）、Firefox 和 IE11 中显示良好。这是它应该添加到每个 li 元素末尾的内容：

在 Chrome 中有时会显示这个然后按 F5 即可修复。

在 Edge 中，它在某些计算机上显示此内容

有谁知道为什么我有时会在 Chrome 中看到这些字符以及为什么 Edge 在某些计算机上显示完全不同的内容？

Answer 1

尽管许多网站都说字符 25b6 在所有浏览器中的工作方式不同。在 Windows 中的字符映射表中查找 Ariel 字体后，我发现 25ba 也给出了相同的字符（足够接近）。用 25ba 而不是 25b6 更新我的 css 后，它在我可以测试的所有浏览器中正确显示。

看起来 25b6 Edge 只是将其更改为表情符号，甚至在它不会阻止 Edge 更改它之后添加 fe0e。