Safari ≤12.1中writing-mode竖排文字歪斜或塌陷，是因为其静默忽略text-orientation: mixed导致英数躺倒，且vertical-rl下height: auto失效致容器塌陷；需运行时检测writingMode和textOrientation值并降级为transform: rotate(90deg)，同时互换宽高、重设尺寸。
为什么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 - 需要竖排文字的子元素（如菜单项、表头），单独在其内部
<span>或<div>上设置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）建议包一层<span class="num-upright">并设text-orientation: upright - 中文标点统一用全角（《》、。、，、！），禁用半角引号
"和逗号,，否则 Safari 渲染时无统一基线锚点
vertical-rl，但不理 text-orientation；能画出旋转效果，但不调整盒模型语义；能加载字体，但不保证标点对齐。上线前必须拿真机（尤其是 iPhone 7–8 + iOS 12–14）跑一遍，模拟器看不出这些细节偏差。 
