css内容字符渲染奇怪答案

【问题标题】：css content character rendering strangecss内容字符渲染奇怪
【发布时间】：2017-06-02 17:42:26
【问题描述】：

我正在使用 :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 在某些计算机上显示的内容完全不同？

【问题讨论】：

不同的浏览器可以有自己的 unicode 字符渲染实现。您是否尝试过设置 unicode 字体使其不使用浏览器默认值？（关于边缘问题）
@FelixGuo 我得到了：font-family: Arial;字体大小：10pt；分配在身上。我尝试将字体和大小规范直接复制到 li:after 部分 css 中，但没有任何区别。
试试这个：stackoverflow.com/questions/32915485/…
@FelixGuo 我刚刚尝试过，但它对 Edge 没有任何影响。检查窗口中的字符映射后，它显示 25ba 作为字体 Ariel 的箭头字符。我已经尝试将其更改为它，并且它在我计算机上的所有浏览器中都能正确显示。虽然网站将 25b6 列为 html 的箭头。
要修复 Chrome 问题，declare the character encoding inside your stylesheet，或者不要将字符直接放入 CSS，而是使用正确的 Unicode 转义，请参阅 stackoverflow.com/a/10393517/1427878

标签： html css pseudo-element

【解决方案1】：

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

似乎使用 25b6 edge 只是将其更改为表情符号，甚至在不阻止 edge 更改它之后添加 fe0e。

【讨论】：