根本原因是浏览器默认字体不同：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：各浏览器下   稳定为 1em，4 个   ≈ 1 个中文字符宽度
• 避免只写 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 标准空格符，它们宽度与字体解耦程度更高。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

•  （En Space，U+2002）：固定为 0.5em，几乎不受字体影响，适合缩进半字
•  （Em Space，U+2003）：固定为 1em，兼容性好（IE8+），比   更可靠
•  （Thin Space，U+2001）：固定为 0.25em，适合微调间距
• 禁用全角空格 　（U+3000）：中文字体映射混乱，iOS 和 Windows 渲染偏差可达 2px

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 也要显式声明，避免继承自全局重置样式。