edge 12–18 对 writing-mode: vertical-rl 实现不完整，会静默忽略 text-orientation 且 height: auto 失效，导致文字堆成一线；需显式设置 height/min-height、避免 flex/grid 嵌套，并用运行时检测替代 @supports。
Edge 12–18 里 writing-mode: vertical-rl 文字堆成一条线？
不是 CSS 写错了，是 Edge 12–18（对应 Windows 10 初期版本）对 writing-mode 的实现不完整：它识别该属性，但会静默忽略 text-orientation，同时在 vertical-rl 下把 height: auto 当作无效值处理，导致块级容器高度塌陷为内容最小高度（常为一行文字的高度），视觉上就是“所有字挤在一条细线上”。
- 必须显式设置
height或min-height，不能依赖auto -
text-orientation: mixed在这些版本中完全不生效，英文字母仍会躺倒；若需直立，只能退而求其次设text-orientation: upright（但注意：IE/Edge 旧版对upright支持也不稳定） - 避免在
vertical-rl容器内嵌套display: flex或display: grid父容器——Edge 12–18 无法协调主轴方向与文本流，子项定位会严重错位
为什么 @supports (writing-mode: vertical-rl) 检测失败却仍有渲染问题？
@supports 只能检测语法是否被识别，不能验证行为是否符合预期。Edge 12–18 会通过该检测，但它对 vertical-rl 的盒模型计算（尤其是 height、line-height 映射逻辑）和 text-orientation 处理都存在偏差。
- 运行时检测更可靠：
getComputedStyle(el).writingMode === 'vertical-rl' && getComputedStyle(el).textOrientation === 'mixed'—— 若后者返回空字符串或undefined，说明已进入降级场景 - 不要依赖
line-height控制竖排行距：在这些 Edge 版本中，line-height仍按横向逻辑计算，实际影响的是字符左右间距；改用固定padding或margin模拟行间隔 - 若容器有
overflow: hidden，旋转后文字可能被意外裁剪——因为vertical-rl下的“宽高语义对调”未被正确应用，需手动补width和height值并加overflow: visible测试边界
能否用 -ms-writing-mode 兼容 Edge 旧版？
可以，但仅限于 Edge ≤17（即 EdgeHTML 引擎时代）。-ms-writing-mode: tb-rl 是当时唯一被完整支持的竖排方案，且行为比标准 writing-mode 更可预测——但它和现代写法不兼容，必须单独维护一套规则。
- 顺序很重要：
-ms-writing-mode: tb-rl必须放在标准writing-mode声明之后，否则旧版 Edge 会跳过整条规则 -
tb-rl不等价于vertical-rl：它不会触发text-orientation，所有字符默认直立，标点位置也不同；若需混合排版，得靠 JS 动态包裹英文单词加span并设transform: rotate(90deg) - 所有方向性样式都要重映射：
margin-top→ 改用margin-right，padding-left→ 改用padding-bottom，否则布局会偏移
降级到 transform: rotate(90deg) 时最易漏的三件事
当检测到 Edge 旧版行为异常，用 transform: rotate(90deg) 替代 writing-mode 是最稳妥的兜底方案，但容易忽略尺寸和交互细节。
- 必须交换
width和height值：原width: 200px; height: 400px要改为width: 400px; height: 200px，否则旋转后溢出或留白过大 - 加
overflow: hidden防止旋转后内容超出容器边界（尤其当父容器有border-radius或clip-path） - 文字不可选、不可复制的问题无法绕过：若业务强依赖文本选择（如引用、分享），需在降级时保留一个隐藏的
textarea或data-text属性供 JS 提取原始内容
text-orientation 完全无视，后者部分支持但 height 计算仍有偏差。做兼容时，别只测“能不能竖”，要盯住“行距准不准”“换行对不对”“容器撑开没”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
