writing-mode: vertical-rl在现代浏览器（Chrome/Firefox/Safari≥13/Edge）中直接生效，但IE9–11需-ms-writing-mode: tb-rl，Safari≤12.1忽略text-orientation，Firefox≤103对vertical-lr支持差，且Flex/Grid中width/height语义会反转。
writing-mode: vertical-rl 在现代浏览器（Chrome/Firefox/Safari≥13/Edge）中可直接生效，但 IE9–11、Safari≤12.1、Firefox≤103 会完全忽略或行为异常——这不是“兼容性差”，而是它们压根没实现标准值，只认旧语法或部分私有属性。
IE9–11 必须用 -ms-writing-mode: tb-rl，且不能混写 vertical-rl
IE9 解析 CSS 时，遇到不认识的属性值（如 -ms-writing-mode: vertical-rl）会直接丢弃整条声明，不是降级，是跳过。结果就是文字仍横排。
- ✅ 正确写法：
writing-mode: vertical-rl; -ms-writing-mode: tb-rl;（标准属性在前，私有属性在后，且值必须是tb-rl） - ❌ 错误写法：
-ms-writing-mode: vertical-rl;或把tb-rl写在前面 - Autoprefixer 不会帮你把
vertical-rl映射成tb-rl——它只加前缀，不改语义 - IE9 不支持
text-orientation，竖排标点、数字方向靠猜，需接受视觉妥协
Safari ≤12.1 中 text-orientation: mixed 被静默忽略
虽然 writing-mode: vertical-rl 能让文字竖起来，但顿号、引号、括号、阿拉伯数字全朝右躺，像乱码。这不是渲染 bug，是 Safari 根本没实现该属性。
- 没有 fallback 值可用，
text-orientation在 Safari≤12.1 中无效果 - 若必须支持，只能放弃混合方向控制，统一用
text-orientation: upright（汉字直立，英文也强行直立，牺牲部分可读性） - 别依赖单行测试：多行换行位置、
text-align对齐逻辑在旧 Safari 中和现代浏览器完全不同
Flex/Grid 容器里设 writing-mode 会让 width/height 语义反转
这个翻转在 Safari 和 IE 中尤其隐蔽：不报错，但你设的 height: 200px 实际控制的是“每行最大视觉宽度”，width 反而决定垂直方向堆叠高度。
立即学习“前端免费学习笔记（深入）”；
- 子元素设
writing-mode: vertical-rl后，父容器的flex-direction会自动适配，但显式写的height含义已变 - 常见表现：文字被截断、换行异常、padding 错位——本质是尺寸单位逻辑变了，不是样式没生效
- 修复方式：把原
height改为width，原width改为height，再配合min-block-size/min-inline-size更稳妥 - Firefox ≤103 对
vertical-lr支持极差，换行、text-align、甚至整段消失都发生过，别用它替代vertical-rl
最易被忽略的是：writing-mode 改变的不只是文字朝向，而是整个块级流的坐标系。一旦嵌套在 Flex/Grid 或与其他方向控制（如 direction、text-orientation）叠加，各浏览器对“哪边是起点”“换行往哪走”的理解就立刻分叉——别只测单行，务必在真实多行、混合中英文、带标点的场景下验证。
