Firefox对空白字符处理更严格，严格遵循HTML5规范导致排版错位；应使用white-space: pre-wrap等CSS属性控制，避免混用不换行空格与普通空格对齐，调试时须查看computed styles中的white-space值。
Firefox里 和普通空格渲染差异明显
Firefox对空白字符的处理比Chrome或Safari更严格，尤其是 （不换行空格）和连续的普通空格（ ）会被压缩、截断或忽略，尤其在外的块级元素中。这不是bug，是它更贴近HTML5规范中关于“空白处理”的定义——但实际开发中常导致排版错位。
用white-space控制空格行为最直接
默认white-space: normal会合并空白、折行；想保留空格原样，必须显式设置CSS：
white-space: pre：像一样保留空格和换行，但不自动换行white-space: pre-wrap：推荐首选，保留空格和换行，同时允许长单词折行white-space: pre-line：合并连续空格，但保留换行符
注意：这些只作用于当前元素及其子内容，不能跨标签继承。
避免混用 和普通空格做对齐
用 强行“打空格”对齐文本，在Firefox里极易失效，因为：
立即学习“前端免费学习笔记（深入）”；
- 多个
display: inline下） - 屏幕缩放或用户自定义字体时，对齐彻底崩溃
替代方案：
text-align: justify配
text-justify: inter-word，或用display: grid + grid-template-columns做结构化对齐。
调试时检查computed styles里的white-space值
Firefox开发者工具中，“计算样式”面板会显示最终生效的white-space值。常见陷阱：
- 父元素设了
white-space: nowrap，子元素即使设pre-wrap也可能被限制 - CSS重置库（如Normalize.css）可能悄悄覆盖了默认值
- 使用
contenteditable="true"时，Firefox会额外应用white-space: pre-wrap，导致意外换行
真要兼容老项目，优先查computed值，而不是只看写的CSS规则。
