CSS旋转表头桌面正常，iPhone端显示倒置的解决方法

问题描述 #

我使用以下CSS在桌面浏览器（Edge、Chrome）中实现了所需的旋转表头：

对应的样式代码：

.table-rotated-header {
  writing-mode: vertical-rl;
  top: 100%;
  text-orientation: mixed;
  left: 50%;
  white-space: nowrap;
  text-align: start;
  vertical-align: middle !important;
  transform: rotate(180deg);
}

但在iPhone的Safari和Chrome浏览器中，表头显示为倒置状态。尝试使用-webkit-transform属性及清除缓存均无效，请问如何实现桌面与iPhone端一致的旋转表头效果？

解决方案 #

问题源于移动端浏览器对writing-mode和transform的组合渲染逻辑差异，可通过以下两种方案统一跨端效果：

方案一：替换旋转逻辑，避免属性冲突 #

去掉transform: rotate(180deg)，改用writing-mode: vertical-lr配合scaleY(-1)实现，这种组合在移动端兼容性更稳定：

.table-rotated-header {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  white-space: nowrap;
  text-align: start;
  vertical-align: middle !important;
  transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
}

方案二：容器分离排版与旋转逻辑 #

给表头文字套一个内层容器，外层负责垂直排版，内层单独处理旋转，消除属性叠加的渲染歧义：

/* 外层容器负责垂直布局 */
.table-rotated-header {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  vertical-align: middle !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 内层容器负责旋转，确保跨端一致 */
.table-rotated-header-inner {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

对应的HTML结构调整为：

<th class="table-rotated-header">
  <span class="table-rotated-header-inner">表头文字</span>
</th>

额外注意 #

测试时建议开启移动端浏览器的无痕模式，确保没有缓存旧样式；尽量避免同时混用多种方向、旋转类属性，减少浏览器渲染歧义。

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