ie9及以下需用-ms-writing-mode:tb-rl（非vertical-rl），且布局行为迥异：height失效、line-height按横向计算、margin/padding方向映射反转，须重置display、手动换算间距；flex/grid在ie中与竖排不兼容，应降级为inline-block或绝对定位。
IE里writing-mode不生效，是因为根本没识别
IE10+ 支持标准 writing-mode，但 IE9 及更早版本只认私有属性 -ms-writing-mode，且语法和取值完全不同。如果你写了 writing-mode: vertical-rl 却在 IE9 里看到文字还是横排，大概率是浏览器直接忽略该声明——它连这个属性名都不认识。
实操建议：
- 必须为 IE9 及以下单独写
-ms-writing-mode: tb-rl（注意不是vertical-rl） - 不能只靠 Autoprefixer：它不会把
vertical-rl转成tb-rl，这是语义转换，不是加前缀 - 若项目需兼容 IE8，
-ms-writing-mode也无效，只能用filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)强转，但会丢失文本可选性和行高控制
-ms-writing-mode: tb-rl 的实际布局行为和现代写法差异很大
IE 的 tb-rl 不只是“文字竖排”，它会强制触发一套老式盒模型逻辑：块级元素默认 inline 行为、height 失效、line-height 按横向理解、甚至 margin 和 padding 的方向映射都反着来。
常见错误现象：
- 设置了
height: 200px，但容器高度仍是内容自适应 - 给文字加
line-height: 2，结果行距变成横向的两倍字高，竖排时挤成一团 -
margin-top变成“往右推”，padding-bottom变成“往上撑”
解决思路是彻底重置布局上下文：
- 用
display: inline-block或float: left让容器重新获得尺寸控制能力 - 改用
line-height配合固定font-size手动模拟行距，比如font-size: 14px; line-height: 28px - 所有方向性间距（
margin/padding）统一换算：原margin-top→ 改用margin-right，padding-bottom→ 改用padding-left
混用标准写法和 -ms- 前缀时，CSS 层叠顺序容易翻车
CSS 解析器对未知属性的处理是“跳过整条声明”，不是“忽略值”。所以当你写：
text {
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
}
在 IE9 中，第一行被完全跳过，第二行生效；但在 Chrome/Firefox 中，第二行是无效属性，被忽略，第一行生效——这本身没问题。但一旦你把顺序反过来：
text {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
问题就来了：某些旧版 IE（如 IE8 兼容模式）遇到不认识的 writing-mode，可能中断后续解析，导致 -ms-writing-mode 也不生效。
稳妥做法：
- 把
-ms-writing-mode放在前面，且确保它独占一行、无其他干扰声明 - 用条件注释或 JS 检测 IE 版本，避免在非 IE 环境加载含
-ms-的规则（减少 CSS 体积和解析负担） - 如果用 PostCSS，别依赖
autoprefixer自动补全，手动维护 IE 分支规则更可控
纵向排版下 flex/grid 在 IE 中基本不可用
哪怕你成功让文字竖排了，如果外层用了 display: flex 或 display: grid 布局，IE10–11 的 flex 实现和现代标准差距极大，尤其配合 -ms-writing-mode 时，主轴方向、对齐方式、甚至子项尺寸计算都会错乱。
典型表现：
-
flex-direction: column在-ms-writing-mode: tb-rl容器里，子项反而水平堆叠 -
justify-content: center完全失效，文字贴顶或溢出 - grid 的
grid-template-rows被忽略，自动退化为单行流式布局
这时候别硬扛，直接降级：
- 用
display: inline-block+vertical-align: middle模拟垂直居中 - 用
position: absolute+top/right手动定位关键元素 - 放弃“响应式竖排”，对 IE 单独提供简化版横向布局（用户感知比错位强）
纵向排版本身在 IE 下就是妥协方案，真正的难点不在怎么写对属性，而在于接受它无法和现代布局体系共存的事实。能跑通、不崩、文字可读，已经是边界了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
