iOS 和 Android 上 vertical-rl 的 baseline 对齐表现不同，因 Core Text 与 HarfBuzz+Skia 对 baseline 计算逻辑不统一；text-orientation 和 unicode-bidi 会显著影响 baseline，如 mixed 模式下中西文基线分离，plaintext 关闭双向算法导致基线跳变；flex 中 align-items: baseline 在 vertical-rl 下失效，因其依赖主轴方向，需改用 flex-direction: column + align-items: center；跨平台对齐应弃用 vertical-align: baseline，优先使用 text-orientation: upright、固定 line-height、统一支持 vert 的字体（如 Noto Serif CJK SC）。
vertical-rl 下 baseline 对齐为什么在 iOS 和 Android 上表现不同？
因为 vertical-rl 改变了块级容器的「内联方向」，而各平台对 vertical-align（尤其是 baseline）的实现依赖底层文本渲染引擎（Core Text vs. HarfBuzz + Skia），且未强制统一 baseline 计算逻辑。结果就是：同一段含 span 或 img 的竖排文本，在 iOS Safari 中文字底部贴齐，Android Chrome 中却悬浮偏高——这不是 bug，是规范留白下的现实差异。
text-orientation 和 unicode-bidi 会间接影响 baseline 吗？
会，而且很关键。当使用 text-orientation: mixed 时，浏览器需为汉字和西文分别计算基线：汉字按字面中心对齐，西文按传统 baseline（字母 x-height 底部）对齐；而 unicode-bidi: plaintext 关闭双向算法后，数字或阿拉伯字符不再参与基线重排，反而让混合行 baseline 更“跳”。常见现象：
-
text-orientation: upright能强制所有字符直立，baseline 表现更稳定（但西文可读性略降） - 没加
unicode-bidi: plaintext的中文段落里混一个2026，iOS 可能把它当 RTL 字符拉高 baseline - 用
line-height: 1.5替代vertical-align: baseline是更可控的替代方案
flex 容器里 vertical-rl 文字的 align-items: baseline 为什么失效？
因为 align-items: baseline 在 flex 布局中只对「主轴垂直」的容器生效（即 flex-direction: column），而 writing-mode: vertical-rl 并不改变父容器的 flex-direction。一旦你在 display: flex; flex-direction: row 的容器上给子项设 writing-mode: vertical-rl，align-items: baseline 实际对齐的是被旋转后的“水平 baseline”，视觉上完全错位。
真正起作用的组合只有：
-
flex-direction: column+ 子项writing-mode: vertical-rl+align-items: center（推荐，逻辑清晰） - 放弃
baseline，改用margin-block-start: auto控制首行位置 - 对齐需求强的场景，用
transform: translateY()手动微调（注意屏幕阅读器兼容性）
如何让竖排文字在所有平台都“看起来对齐”？
别依赖 vertical-align: baseline。它在竖排上下文中语义模糊、实现分裂，且无法跨平台预测。更务实的做法是：
- 统一用
text-orientation: upright消除西文/数字旋转带来的基线扰动 - 显式设置
line-height（如line-height: 2），它在vertical-rl下控制的是字符左右间距，反而比 baseline 更稳定 - 避免在竖排块内嵌套
inline元素做对齐锚点；改用display: block+margin-block - 真要像素级对齐，用
getBoundingClientRect()在 JS 中实测各平台 baseline 偏移量，再动态 patch CSS 变量
最常被忽略的一点：baseline 不一致往往不是样式问题，而是你用了 font-family 中混入了 fallback 字体——不同字体的 ascent/descent 设计值天差地别，尤其在竖排下会被放大。固定一个支持 vert 特性的字体（如 Noto Serif CJK SC），比调一百遍 vertical-align 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
