vertical-rl 在 chrome 和 safari 中行为不一致，是因为 direction 默认值不同：chrome 默认 ltr，safari 旧版倾向 rtl；firefox 显示 horizontal-tb 多因前缀干扰或覆盖；x5 内核不支持 writing-mode 需降级；vertical-lr 仅 firefox 104+ 支持。
vertical-rl 在 Chrome 和 Safari 中行为不一致，是因为 direction 默认值不同
直接设 writing-mode: vertical-rl 后，Chrome（含 Android WebView）默认按 direction: ltr 渲染，文字从上到下、从左到右堆叠；Safari（尤其 iOS 16.4 之前）则倾向按 direction: rtl 处理，导致新行出现在左侧——单行看不出差别，但多行或带 text-align 时立刻暴露为“方向反了”。这不是 bug，是浏览器对未声明 direction 的 fallback 策略差异。
实操建议：
- 始终显式声明
direction：中文竖排用direction: rtl（传统右起），现代 UI 标题可用direction: ltr（左起更符合直觉） - 避免依赖
text-align: right对齐：它在vertical-rl+direction: rtl下等效于顶部对齐，在direction: ltr下才是右侧对齐；统一改用text-align: start或text-align: end - 若需兼容旧版 Safari（如 iOS 15.6），加
@supports (writing-mode: vertical-rl) { ... }包裹整套规则，防止被错误解析
Firefox 显示为 horizontal-tb，大概率是 -webkit- 前缀干扰了标准属性
部分项目为了兼容老 Chrome/Safari，写了 -webkit-writing-mode: vertical-rl 却没写标准属性，或把标准属性写在前缀后面——Firefox 忽略所有 -webkit- 前缀，且 CSS 层叠规则会让后声明的 writing-mode: horizontal-tb（比如重置样式表里）覆盖前面的 vertical-rl。
检查方法：
- 打开 DevTools → Computed 面板，搜索
writing-mode，看最终生效值是不是horizontal-tb - 确认源码中没有重复声明，且标准属性
writing-mode: vertical-rl在前缀之后、无其他覆盖 - 删掉所有
-webkit-和-ms-前缀（2026 年已无必要），只留标准语法
移动端微信内嵌页显示错乱，不是 writing-mode 失效，而是 X5 内核根本不识别
微信 Android（8.0.30 及更早）和部分 iOS 微信使用腾讯 X5 内核，它对 writing-mode 的支持近乎为零——即使 getComputedStyle(el).writingMode 返回 vertical-rl，实际渲染仍是横排。这不是 CSS 写错了，是引擎级缺失。
可靠降级方案：
- 运行时检测：
if (getComputedStyle(el).writingMode !== 'vertical-rl') { el.classList.add('fallback-rotate'); } - 降级样式必须重算尺寸：
.fallback-rotate { transform: rotate(90deg); width: 200px; height: auto; }（原height: 200px要变成width） - 别用
transform: rotate()+flex容器：旋转后 flex 主轴逻辑混乱，子项坐标偏移，点击区域错位
vertical-lr 在 Firefox 中不生效，因为版本太低或拼写错误
vertical-lr 在 Firefox 104+ 才获得完整支持，旧版本（如 91 ESR）会静默回退到 horizontal-tb。同时注意拼写：vertical-lr 不是 vertical-rl，也不是 verticalLR（CSS 属性名全小写，连字符不可省略）。
安全做法：
- 优先用
vertical-rl，它在所有现代浏览器中支持度更高（Chrome 48+/Firefox 41+/Safari 10.1+） - 若必须用
vertical-lr，加@supports (writing-mode: vertical-lr)条件加载，并准备 fallback - 用
font标签临时标出问题元素：<font color="red">vertical-lr unsupported</font>辅助调试
真正难搞的从来不是属性本身，而是你没意识到 writing-mode 一开，整个盒模型、对齐逻辑、甚至 margin-top 的作用对象都换了——它不是“让字转个身”，而是重建了一套坐标系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
