ie8及以下需用filter: progid:dximagetransform.microsoft.basicimage(rotation=1)模拟竖排，仅视觉旋转、不改文本流；ie9支持-ms-writing-mode: tb-rl但不识别vertical-rl，须单独声明且置于标准属性之后。
IE8及以下必须用filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
IE8及更早版本连-ms-writing-mode都不支持，writing-mode声明直接被忽略。此时唯一能强制文字“看起来竖着”的方式，是用IE私有filter做90度旋转。
常见错误现象：
-
writing-mode: vertical-rl和-ms-writing-mode: tb-rl在IE8里全无效 - 加了
filter后文字不可选、无法复制 - 行高
line-height完全失控，文字上下堆叠或留白过大
实操建议：
- 仅对IE8及以下条件加载该方案，可用
*background: red\9或_background: blue做hack隔离 - 必须配合
display: inline-block或zoom: 1触发hasLayout，否则filter不生效 - 旋转后容器尺寸逻辑翻转：原
width变成视觉高度，height变成视觉宽度，需手动交换设置 - 放弃
text-orientation和text-combine-horizontal——这些属性在IE8里不存在
rotation=1对应的是90度顺时针，不是vertical-rl的语义
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)只是图形层面旋转，不改变文本流方向。这意味着：
-
margin-top仍是向上推，不是向右推；padding-left仍是向左撑，不是向下撑 - flex/grid子项仍按原始坐标系排列，不会因旋转而自动重排主轴
- 如果父容器用了
text-align: center，旋转后文字会以原始水平中线为基准居中，视觉上偏移
所以不能把它当writing-mode的平替，只能作为“最后手段”的视觉模拟。
实操建议：
- 若需居中，改用
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg)（但IE8不支持transform，故仍得靠filter+ 手动top/left微调） - 行距控制只能靠
line-height乘以一个经验系数（比如font-size: 14px时设line-height: 36px），没有自动映射 - 避免在
filter元素内嵌套position: relative子元素，IE8的定位计算会异常
IE9用-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显示横排 - Autoprefixer生成的
-ms-writing-mode: vertical-rl在IE9里完全无效 - CSS顺序写反：
-ms-writing-mode: tb-rl; writing-mode: vertical-rl;在现代浏览器里没问题，但在IE9里tb-rl生效，vertical-rl被忽略（正确）；可一旦漏掉-ms-前缀，就彻底失效
实操建议：
- 必须显式写
-ms-writing-mode: tb-rl，且放在writing-mode: vertical-rl之后，确保层叠优先级 - 所有涉及尺寸、间距的样式都要降级重写：
height失效就用width代替；margin-top要换算成margin-right - 不要在同一个选择器里同时给
display: flex和-ms-writing-mode——IE9的flex根本不理解竖排流，会塌陷
真正麻烦的从来不是怎么让字竖起来，而是竖起来之后，整个盒模型逻辑都变了。IE9的tb-rl和IE8的filter都不是“加个属性就行”的事，它们各自引入了一套独立于标准的布局解释器。你得像调试两个不同语言的运行时那样，分别对待。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
