ie9及以下需用-ms-writing-mode:tb-rl而非vertical-rl，ie8仅支持filter旋转；tb-rl下height/line-height/margin失效，须用inline-block、像素line-height、margin替代padding和absolute定位。
writing-mode: vertical-rl，必须用 -ms-writing-mode: tb-rl，且不能和标准写法混写或顺序颠倒
IE9 必须用 -ms-writing-mode: tb-rl，不是 vertical-rl
IE9 识别的是私有属性 -ms-writing-mode，值只能是 tb-rl、lr-tb 等旧语法；vertical-rl 对它来说是非法值，整条声明会被跳过。Autoprefixer 不会做这种语义转换，只加前缀，所以生成的 -ms-writing-mode: vertical-rl 在 IE9 里完全无效。
- 正确写法：
-ms-writing-mode: tb-rl（放在标准声明之后） - 错误写法：
writing-mode: vertical-rl; -ms-writing-mode: vertical-rl;→ IE9 直接忽略第一行，第二行又不合法 - IE8 及更早：连
-ms-writing-mode都不支持，只能退到filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
-ms-writing-mode: tb-rl 下 height、line-height、margin 全部失效
IE 的 tb-rl 不是“竖排版”，而是一套老式盒模型逻辑：块级元素默认 inline 行为，height 失效，line-height 按横向字高计算，margin-top 实际往右推，padding-bottom 实际往上撑。
- 容器高度失控？加
display: inline-block或float: left重获尺寸控制 - 行距挤成一团？放弃无单位
line-height，改用像素值，比如font-size: 14px; line-height: 28px - 想“上边距”？别用
margin-top，换成margin-right；想“下内边距”？用padding-left
绝对定位 + padding 在 IE 中完全不可靠
在 writing-mode 或 -ms-writing-mode 下，position: absolute 配合 right/left 和 padding 会触发 IE 特有渲染异常：位置偏移、padding 方向错乱、甚至整个元素消失。
- 根本原因：IE 把 padding 和 absolute 坐标都锚定在原始水平坐标系，不随书写方向翻转
- 替代方案：统一改用
margin控制偏移（margin-right替right，margin-top替top） - 若必须用定位，先加
display: inline-block触发 hasLayout，再手动微调top/left
IE8 只能靠 filter 强转，但它是视觉旋转，不是文本流重排
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1) 只是把元素当图片旋转 90°，不改变 DOM 结构、文本流、可选性或事件区域。所有间距、对齐、flex/grid 子项排列仍按原始横排逻辑运行。
- 必须加
zoom: 1或display: inline-block才能触发 hasLayout，否则 filter 不生效 - 旋转后容器的
width变成视觉高度，height变成视觉宽度，需手动交换设置 - 文字居中不能靠
text-align: center，得用position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg)—— 但 IE8 不支持transform，只能硬调top/left
tb-rl 和现代 vertical-rl 属于两套互不兼容的布局引擎——你得为同一视觉目标，在两个世界里各自重建一套逻辑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
