writing-mode: vertical-rl 是唯一稳定实现中文竖排的标准写法，但 IE9–11 需用 -ms-writing-mode: tb-rl，Safari≤12.1 不支持 text-orientation，Firefox≤103 对 vertical-lr 支持差，Flex/Grid 中 height/width 语义会反转。
writing-mode: vertical-rl 是唯一能稳定实现中文竖排（从上到下、从右到左）的标准写法，但 IE9–11、旧 Safari、旧 Firefox 会因不识别该值或实现不全而错乱——这不是“兼容性差”，而是它们压根没实现这个标准值。
IE9–11 必须用 -ms-writing-mode: tb-rl，且不能混写 vertical-rl
IE9 只认私有属性 -ms-writing-mode，且只接受 tb-rl、lr-tb 这类旧枚举值。vertical-rl 对它来说是非法值，整条声明会被丢弃。
- ❌ 错误写法：
writing-mode: vertical-rl; -ms-writing-mode: vertical-rl;→ IE9 直接跳过两行，文字横排 - ✅ 正确写法：
writing-mode: vertical-rl; -ms-writing-mode: tb-rl;→ 现代浏览器用第一行，IE9 用第二行 - ⚠️ Autoprefixer 不会把
vertical-rl转成tb-rl，这是语义映射，不是加前缀，必须手动补
Safari ≤12.1 不支持 text-orientation，标点方向靠猜
writing-mode: vertical-rl 在 Safari 12.1 及更早版本中能生效，但 text-orientation: mixed 被静默忽略。结果是汉字竖着，顿号、引号、括号全朝右，阿拉伯数字横躺，视觉像乱码。
- ✅ 降级方案：用
@supports (text-orientation: mixed)包裹竖排规则，不支持时 fallback 到transform: rotate(90deg) - ⚠️
transform是纯视觉旋转，不改变文本流，需手动调width/height补偿尺寸翻转 - ❌ 不要用
direction: rtl替代writing-mode，它只改 inline 顺序，不改文字方向
Firefox ≤103 对 vertical-lr 支持差，别拿它当 vertical-rl 的镜像
很多项目误用 vertical-lr 想实现“从左到右堆叠”，结果在 Firefox ≤103 中发现换行异常、text-align: right 失效、甚至整段消失。
立即学习“前端免费学习笔记（深入）”；
- ✅ 若需兼容旧 Firefox，优先用
vertical-rl+direction: ltr模拟从左到右堆叠效果 - ⚠️
vertical-lr的内联起始边是左边，新行出现在当前行右侧；vertical-rl新行在左侧——单行看不出区别，多行换行位置完全不同 - ❌ 不要用
vertical-lr做侧边栏标题，除非你已验证所有目标浏览器的换行逻辑
Flex/Grid 容器里设 writing-mode 会反转 height/width 语义
在 display: flex 或 display: grid 的父容器中直接设 writing-mode，子元素的 height 不再控制高度，而变成控制“每行最大长度”；width 反而控制实际高度。这个翻转在 Safari 和 IE 中尤其隐蔽，因为它们不报错，只是渲染出乎意料。
- ✅ 正确做法：在子元素（如
div或span）上单独设writing-mode，而不是父容器 - ⚠️ Flex 中
align-items: center仍按原始块方向计算，竖排文字会“横向居中”，视觉偏右；应改用justify-items: center - ❌ 不要在 Grid 容器上设
writing-mode后指望grid-template-rows控制竖排行高——它只管轨道，不管文本流
最易被忽略的一点：当你在 Flex/Grid 容器里给子元素设 writing-mode，父容器的 height 或 width 语义会反转——height 不再控制“高度”，而变成控制“每行最大长度”。这个翻转在 Safari 和 IE 中尤其隐蔽，因为它们不报错，只是渲染出乎意料。
