iOS Safari动态按钮CSS垂直文本方向失效问题求助

问题描述 #

需在页面右侧创建垂直布局的动态按钮，要求按钮文本沿Y轴垂直排列。使用writing-mode: vertical-rl;属性后，该效果在iOS Safari中无法生效。按钮为动态生成，无法单独设置样式，寻求通用CSS解决方案。

解决方案 #

针对iOS Safari对writing-mode的兼容性问题，可通过以下两种通用方案解决：

方案1：CSS变换模拟垂直排列 #

利用transform旋转元素实现垂直文本，该方式在iOS Safari中兼容性更稳定：

.vertical-button {
  /* 旋转90度实现垂直排列，如需从右到左则用rotate(-90deg) */
  transform: rotate(-90deg);
  /* 调整旋转原点，避免布局偏移 */
  transform-origin: right center;
  /* 强制文本不换行，保证垂直排列完整性 */
  white-space: nowrap;
}

如果按钮需要固定在页面右侧，可配合定位属性调整位置：

.vertical-button {
  transform: rotate(-90deg);
  transform-origin: right center;
  position: fixed;
  right: 0;
  top: 50%;
  /* 抵消旋转带来的位置偏移 */
  transform: translateY(-50%) rotate(-90deg);
}

方案2：writing-mode的前缀兼容写法 #

iOS Safari较新版本支持带-webkit前缀的writing-mode，可同时配置前缀属性和标准属性做回退：

.vertical-button {
  /* 标准属性 */
  writing-mode: vertical-rl;
  /* WebKit内核前缀，适配iOS Safari */
  -webkit-writing-mode: vertical-rl;
  /* 旧版iOS Safari兼容的替代值 */
  writing-mode: tb-rl;
  -webkit-writing-mode: tb-rl;
}

注意：该方案对部分旧版iOS Safari仍可能失效，建议结合变换方案提升兼容性。

动态按钮的全局样式适配 #

因按钮为动态生成，可通过全局选择器匹配目标按钮（比如根据父容器类名或按钮通用特征）：

/* 假设动态按钮都在.right-sidebar容器下 */
.right-sidebar button {
  transform: rotate(-90deg);
  transform-origin: right center;
  white-space: nowrap;
  margin: 12px 0;
}

验证建议 #

1. 在iOS Safari真机上测试效果，优先选择变换方案，兼容性覆盖更广
2. 调整transform-origin和定位属性，确保按钮在页面右侧的布局符合预期

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