html - 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。