根本原因是浏览器默认字体不同：chrome和firefox用times new roman（比例字体），safari用pingfang sc，ie/旧edge用simsun；空格宽度取决于字体字距度量，在等宽字体中为固定值（如1em），在比例字体中则浮动。
为什么空格在 Chrome、Safari、Firefox 里宽度不同
根本原因不是 HTML 解析差异，而是浏览器默认字体不同：Chrome 和 Firefox 默认用 Times New Roman（比例字体），Safari 偏好 PingFang SC，IE/旧 Edge 用 SimSun（宋体）。而空格字符（ 或 U+0020）的像素宽度完全取决于当前字体的字距度量——同一个 在等宽字体里是固定值，在比例字体里会浮动。
-
Times New Roman中约等于小写字母n宽度（非整数像素，随字号缩放） - 在
SimSun或Courier New中，它严格等于一个汉字宽度（即 1em） - Safari 对
display: inline-block元素后换行）
用 font-family 锁定等宽字体最直接
不改 HTML 结构、不加 JS，只靠 CSS 就能统一空格宽度。关键是选一个所有现代浏览器都预装且对空格处理一致的等宽字体。
- 推荐用
font-family: 'Courier New', monospace：各浏览器下 - 避免只写
SimSun或Microsoft YaHei：前者在 macOS/Linux 上 fallback 失败，后者在 Safari 中空格仍可能被压缩 - 必须写全栈：例如
font-family: 'Courier New', 'Noto Sans CJK SC', monospace，防某些系统缺失 Courier
.text-with-spaces {
font-family: 'Courier New', monospace;
}
比 更稳的 Unicode 空格字符
如果不能改字体，或需语义更清晰的空格控制，优先用 Unicode 标准空格符，它们宽度与字体解耦程度更高。
-
-
-
- 禁用全角空格
white-space 配合字体才能真正可控
单设 white-space: pre 或 pre-wrap 不解决宽度问题——它只管“是否保留”，不管“占多宽”。必须和字体绑定才生效。
- 错误写法：
white-space: pre; /* 没配 font-family，空格依然飘 */ - 正确组合：
white-space: pre; font-family: 'Courier New', monospace; - 移动端特别注意：iOS Safari 对
tab-size默认按 4 渲染，但若父级有font-size: 0，所有空格宽度归零——务必检查样式链
最易被忽略的一点：CSS 的 letter-spacing 会影响空格实际渲染宽度，哪怕设为 0 也要显式声明，避免继承自全局重置样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
