Safari 将连续空白字符压缩为单个空格是符合 HTML 标准的正常行为，非 bug；应使用 white-space 属性（如 pre-wrap）或 CSS 间距方案替代空格布局。
HTML 中普通空格被 Safari 合并显示为单个空格
Safari 默认遵循 HTML 规范，将连续的空白字符（空格、制表符、换行）压缩为一个空格。如果你在 <div>hello<span> </span>world</div> 里写了多个 或纯空格，Safari 很可能只渲染出一个视觉空隙——这不是 bug，是标准行为。
常见误操作是直接粘贴带缩进的代码、用空格对齐文本、或依赖空格控制布局，结果在 Safari 里“塌陷”了。
- 用
white-space影响 - 若用
text-align: justify或弹性布局，空格行为更难预测 - 避免在语义化标签（如
<p>、<span>）内靠空格对齐内容；该用margin、padding或grid就别硬塞空格
white-space 属性在 Safari 中的兼容表现
white-space 是控制空格渲染最直接的 CSS 属性，但 Safari 对部分取值的支持有细节差异，尤其在 iOS 15–16 和 macOS Monterey 上：
-
white-space: pre：保留空格和换行，但不自动换行 —— Safari 完全支持，适合代码块 -
white-space: pre-wrap：保留空格和换行，且允许换行 —— Safari 支持良好，推荐用于用户输入的富文本预览 -
white-space: break-spaces：新标准，让空格也能换行 —— Safari 16.4+ 才支持，旧版会退化为pre-wrap - 慎用
white-space: pre-line：它会合并连续空格但保留换行，Safari 表现一致，但容易误以为“空格没丢”，实则已被压缩
div.spaced {
white-space: pre-wrap;
font-family: monospace; /* 可选，让空格宽度更可控 */
}用 CSS 替代空格实现可预测间距
真正需要“多个空格宽度”的场景（比如对齐字段、模拟等宽排版），应放弃纯空格，改用 CSS 控制：
立即学习“前端免费学习笔记（深入）”；
- 固定宽度间隙：用
inline-block+width，例如<span class="gap" style="display:inline-block;width:2em"></span> - 字符级空隙：用
letter-spacing，但注意它影响所有字符，不单是空格 - 文本对齐：用
text-indent控制首行缩进，或padding-left统一左偏移 - 表格类布局：用
display: table-cell或grid-template-columns，比空格可靠得多
调试 Safari 空格问题的实操步骤
遇到 Safari 显示异常，别猜，直接检查 DOM 渲染结果：
- 用 Safari 开发者工具（
Cmd+Opt+I）选中元素，看「Elements」面板里原始 HTML 是否含预期空格 —— 如果源码里空格已丢失，问题出在 JS 字符串拼接或后端模板 - 在「Styles」面板确认
white-space是否被继承或覆盖，特别注意user agent stylesheet对<pre>和<code>的默认设置 - 临时加
outline: 1px solid red查看元素实际尺寸，判断是空格没渲染，还是被父容器font-size: 0或line-height压缩了视觉高度 - 在 iOS Safari 真机上测试：某些空格渲染差异（如输入法插入的零宽空格
）只在移动端触发
空格不是布局单位，它的渲染受 HTML 解析、CSS 白空间规则、字体度量三重影响。Safari 没错，只是它更严格地执行了标准。想稳，就别依赖空格本身。
