IE11不支持text-orientation:upright，求替代CSS属性实现文字竖排

嘿，我来帮你搞定IE11里竖排文字的问题！text-orientation: upright确实在IE11里完全不支持，但咱们有几个靠谱的替代方案，能完美实现你要的每个字母垂直排列的效果：

方案1：利用带前缀的writing-mode（适配IE11+现代浏览器） #

IE11支持带微软前缀的writing-mode属性，配合旋转可以模拟出text-orientation: upright的效果：

.vertical-text {
  /* 现代浏览器标准写法 */
  writing-mode: vertical-rl;
  text-orientation: upright;
  /* IE11专属前缀写法 */
  -ms-writing-mode: tb-rl;
  /* IE11不支持text-orientation，用旋转转正文字 */
  transform: rotate(180deg);
  /* 限制容器宽度，确保文字竖排显示 */
  width: 24px;
  text-align: center;
}

使用时只需要把文字放在这个类的容器里就行：

<div class="vertical-text">START</div>

这个方案能让现代浏览器用标准属性，IE11通过前缀和旋转达到一致效果，适合动态或较长的文本。

方案2：逐个字符拆分（兼容性拉满，全浏览器通用） #

如果你的文本是固定的（比如示例里的"START"），直接把每个字符放在独立的块级元素里，完全不需要依赖任何CSS3特性，IE11肯定能完美支持：

<div class="vertical-stack">
  <p>S</p>
  <p>T</p>
  <p>A</p>
  <p>R</p>
  <p>T</p>
</div>

.vertical-stack p {
  margin: 4px 0; /* 调整字符间距，按需修改 */
  text-align: center; /* 可选，让文字居中对齐 */
}

要是文本是动态生成的，也可以用简单的JS代码自动拆分每个字符，这个方法的兼容性绝对是最稳的。

方案3：Flex布局实现（适合动态文本） #

IE11支持带前缀的Flex布局，我们可以利用垂直方向的Flex流让文字自动竖排：

.vertical-flex {
  /* IE11前缀 */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: center; /* 让每个字符居中 */
  gap: 4px; /* 字符间距，IE11不支持gap，可用margin替代 */
}
/* 给IE11单独设置margin */
_:-ms-fullscreen, :root .vertical-flex p {
  margin: 4px 0;
}

<div class="vertical-flex">START</div>

这个方案不需要手动拆分字符，动态文本也能直接用，唯一要注意的是IE11不支持gap属性，需要用margin做兼容处理。

以上几个方案都能达到你要的竖排效果，你可以根据自己的文本类型（静态/动态）和布局需求来选择最合适的~

内容的提问来源于stack exchange，提问作者ama