主流浏览器已原生支持<ruby>，Firefox 128+修复排版错位；<rp> fallback行为仍严格执行；推荐用CSS变量统一控制注音样式，<ruby>正常继承父级变量，iOS 17.4起才稳定支持var()在rt的font-size中计算。
ruby 标签在现代浏览器中的实际渲染表现
目前主流浏览器（Chrome、Edge、Safari、Firefox 128+）已原生支持 <ruby>，但 Firefox 在 2026 年前长期存在排版错位问题，直到 128 版本才修复 rt 垂直对齐逻辑。Opera 已停止独立开发，其内核现为 Chromium，因此无需单独适配。关键点是：<rp> 的 fallback 行为仍被所有浏览器严格执行——当 <ruby> 不被识别时，<rp> 内容会显示，而 <rt> 被忽略。
用 CSS 变量控制 ruby 注音样式而非硬编码
直接写死 font-size: 0.7em 或 color: #666 会导致多语言场景下难以维护。更合理的方式是把注音的视觉属性抽成变量，例如：
ruby {
--ruby-font-size: 0.75em;
--ruby-color: #555;
--ruby-line-height: 1.2;
}
ruby rt {
font-size: var(--ruby-font-size);
color: var(--ruby-color);
line-height: var(--ruby-line-height);
}
这样后续只需修改根元素或局部作用域的 :root 或 ruby[data-lang="ja"] 的变量值，就能批量调整日文/韩文/古汉语注音风格，避免重复覆盖规则。
ruby 元素不继承父级 CSS 变量？这是个假问题
<ruby> 是普通流内行内元素，它完全继承父元素的 CSS 变量，不存在“特殊隔离”。常见误解源于两点：
- 开发者在
<rt>上写了font-size: 0.6em，覆盖了变量继承； - 用了
all: initial或all: unset重置样式，清除了变量继承链。
<ruby> 外层加 style="--test: red;"，再在 rt 里用 color: var(--test)，能正常生效。立即学习“前端免费学习笔记（深入）”；
移动端 Safari 对 ruby + CSS 变量的兼容边界
iOS 17.4（2024 年初发布）起，Safari 才开始稳定支持 var() 在 ruby rt 的 font-size 中计算，此前版本会静默回退为默认字号。如果你的项目需兼容 iOS 16 及更早系统，应避免在 rt 的尺寸类属性（font-size、line-height、padding）中使用变量，改用媒体查询或 JS 动态 class 控制。其他属性如 color、text-shadow 在 iOS 15+ 就已安全可用。
