Chrome浏览器中CSS项目符号图标偶现显示异常求助

AI 小北

2026-6-26

问题解决：Chrome偶现CSS Unicode项目符号显示异常

根本原因

Chrome的缓存机制可能留存编码异常的CSS文件副本，即便文件本身声明了UTF-8，缓存的损坏或旧版本会导致字符解析错误，清除缓存能临时解决就是这个原因。
页面字体加载顺序或 fallback 字体不支持\2022（项目符号）字符，也会偶发显示奇怪字符的情况。

修复方案

强制浏览器更新缓存
给CSS文件添加版本号后缀（如app.css?v=20240520），或者在服务器端设置CSS文件的响应头Cache-Control: no-cache, must-revalidate，避免浏览器复用旧的缓存文件。
替换转义字符为直接输入
将content: "\2022";改为直接输入项目符号字符：
```
&::before {
    color: $primary;
    content: "•";
    font-size: 1rem;
    padding-right: 1rem;
    position: relative;
    top: 0;
}
```
只要CSS文件编码为UTF-8，直接字符的解析兼容性更稳定，能绕过转义字符的缓存解析问题。

指定兼容字体
在伪元素样式中明确包含支持该字符的字体，确保不会 fallback 到不兼容的字体：

&::before {
    color: $primary;
    content: "\2022";
    font-size: 1rem;
    padding-right: 1rem;
    position: relative;
    top: 0;
    font-family: Arial, sans-serif, "Segoe UI Emoji";
}