怎样修复CSS writing-mode在Safari中的排版错误-css教程-PHP中文网

Safari ≤12.1中writing-mode竖排文字歪斜或塌陷，是因为其静默忽略text-orientation: mixed导致英数躺倒，且vertical-rl下height: auto失效致容器塌陷；需运行时检测writingMode和textOrientation值并降级为transform: rotate(90deg)，同时互换宽高、重设尺寸。

怎样修复css writing-mode在safari中的排版错误

为什么Safari里writing-mode竖排文字歪斜或塌陷

不是代码写错了，是 Safari ≤12.1 会静默忽略 text-orientation: mixed，导致汉字直立、英文数字全躺倒；而 writing-mode: vertical-rl 单独存在时，height: auto 失效，容器高度塌成一条线。这两点叠加，就是文字“堆在一起+方向错乱”的典型表现。

text-orientation 在 Safari ≤12.1 中完全不生效，标点、数字、拉丁字母朝向靠浏览器猜
vertical-rl 下块级盒的 height 变成“视觉宽度”，没设具体值就默认为 0 或内容最小高度
微信 iOS 使用系统 WebKit，iPhone 6s 及更早设备（iOS 12 及以下）基本等同于 Safari 12.1 行为

如何检测并降级处理 Safari 旧版本

不能只靠 @supports 查 writing-mode，因为 Safari 12.1 虽支持该属性，却不支持配套的 text-orientation。必须运行时检测渲染结果是否符合预期。

用 getComputedStyle(el).writingMode === 'vertical-rl' 判断属性是否被识别
再加一层验证：getComputedStyle(el).textOrientation === 'mixed' —— Safari ≤12.1 返回空字符串或 undefined
任一条件不满足，就触发降级：移除 writing-mode 和 text-orientation，改用 transform: rotate(90deg)
降级后必须手动重设尺寸：width 和 height 互换，并加 overflow: hidden 防止旋转后溢出

Flex/Grid 容器里加 writing-mode 为什么在 Safari 中更易崩

Safari 对 writing-mode 与布局容器的组合解析更保守：它不会像 Chrome 那样尝试协调主轴方向，而是直接按原始坐标系渲染子项，导致 flex item 堆叠错位、grid gap 方向反常、justify-content 完全失效。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

绝对不要给 display: flex 或 display: grid 的父容器设 writing-mode
需要竖排文字的子元素（如菜单项、表头），单独在其内部或 上设置 writing-mode: vertical-rl
若需整列对齐，用 flex-direction: column + transform: rotate(90deg) 更可控，但注意 touchstart 坐标需手动偏移修正


Safari 中 align-items: center 在竖排文本块内可能错位，优先改用 margin-inline: auto 或 text-align: center

字体 fallback 和标点在 Safari 中怎么不崩
Safari 竖排时对字体回退更敏感：某些系统字体（如 -apple-system）在 vertical-rl 下会压缩标点宽度，破折号——、省略号… 易断开或错位；半角标点（如 "、,）默认旋转 90°，但 Safari 不强制对齐基线，造成视觉参差。


font-family 必须显式列出支持竖排的中文字体："PingFang SC", "Heiti SC", "Microsoft YaHei", sans-serif

避免使用 text-orientation: sideways —— Safari 会把它当无效值，但部分版本仍触发意外旋转
纯数字串（如 2024）建议包一层  并设 text-orientation: upright

中文标点统一用全角（《》、。、，、！），禁用半角引号 " 和逗号 ,，否则 Safari 渲染时无统一基线锚点



真正麻烦的不是 Safari 不支持某个值，而是它对同一段 CSS 的“支持程度”分层太细：能解析 vertical-rl，但不理 text-orientation；能画出旋转效果，但不调整盒模型语义；能加载字体，但不保证标点对齐。上线前必须拿真机（尤其是 iPhone 7–8 + iOS 12–14）跑一遍，模拟器看不出这些细节偏差。