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 在 Chrome/Firefox/Safari（≥13）和 Edge 中表现一致，但在 IE9–11、旧 Safari（≤12.1）里会失效或错乱——不是浏览器“理解不同”，而是它们根本没实现标准值，只认老式私有语法。
IE9–11 必须用 -ms-writing-mode: tb-rl，且不能混写 vertical-rl
IE9 识别 -ms-writing-mode，但只接受 tb-rl、lr-tb 这类旧枚举值；若你写成：
writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; /* ❌ IE9 直接跳过整条声明 */
结果就是 IE9 完全忽略该规则，文字仍横排。CSS 解析器对未知属性值的处理是“丢弃整条声明”，不是“取默认值”。
- ✅ 正确写法：标准属性在前，私有属性在后，且私有值必须是
tb-rl - ⚠️ Autoprefixer 不会帮你把
vertical-rl转成tb-rl——这是语义映射，不是加前缀 - ❌ 不要写
-ms-writing-mode: vertical-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（原height变成视觉宽度） - ❌ 别用
unicode-bidi: plaintext强行“修正”——它会破坏中英混排的双向文本逻辑
Firefox 对 vertical-lr 支持滞后，v104 才真正稳定
很多项目误以为 vertical-lr 是 vertical-rl 的镜像替代，结果在 Firefox ≤103 中发现文字换行异常、text-align: right 失效、甚至整段消失。
- ✅ 若目标用户含大量旧版 Firefox，优先用
vertical-rl+direction: ltr模拟从左到右堆叠效果 - ⚠️
vertical-lr的内联起始边是左边，意味着新行出现在当前行右侧——这和vertical-rl的行为在多行时完全不同，别凭单行测试下结论 - ❌ 不要用
vertical-lr做侧边栏标题，除非你已验证所有目标浏览器的换行位置
最易被忽略的一点：当你在 Flex/Grid 容器里给子元素设 writing-mode，父容器的 height 或 width 语义会反转——height 不再控制“高度”，而变成控制“每行最大长度”。这个翻转在 Safari 和 IE 中尤其隐蔽，因为它们不报错，只是渲染出乎意料。
