chrome/firefox/safari对ruby标签的基本渲染不一致：chrome 120+和firefox 125+稳定支持，safari 17.5起才修复rt垂直对齐偏移，此前版本常错位或下沉，ie/edge legacy则完全忽略。
ruby标签在Chrome/Firefox/Safari中的基本渲染是否一致
ruby标签本身是HTML5标准中定义的注音标记，语义明确，但浏览器实现差异大：Chrome 120+ 和 Firefox 125+ 已稳定支持 ruby/rt/rp 的默认样式和换行逻辑；Safari 17.5（macOS 14.5）起才真正修复了 rt 垂直对齐偏移问题，此前版本常出现注音文字下沉或错位；IE/Edge Legacy 完全不识别 ruby，会将其当作未知 inline 元素直接忽略内容。
验证方式很简单：document.querySelectorAll('ruby').length 在 Safari 16.x 返回 0，在 Safari 17.5+ 返回正确数量；Chrome 和 Firefox 始终返回非零值。别依赖 DevTools 的 Elements 面板“看起来有”，要查 DOM 实际存在性。
ruby在移动端WebView（Android Chrome WebView / iOS WKWebView）中的实际表现
Android WebView（基于Chromium 120+）对 ruby 支持良好，但需注意：若页面未设置 <meta name="viewport" content="width=device-width">，部分低版本 WebView 会强制缩放导致 rt 文字被裁剪；iOS WKWebView（iOS 17.4+）已同步 Safari 17.5 行为，但 iOS 16.6 及更早版本仍存在 rt 水平居中失效、rp 显示异常（括号过宽或不显示）的问题。
- 必须显式设置
ruby { line-height: 1.5; }，否则 Android WebView 中多行 ruby 容易堆叠错乱 - 避免给
rt设font-size小于 12px，iOS 16.6 下会触发渲染 bug，文字变模糊甚至消失 -
rp标签在所有平台都不应设display: none—— Safari 16.6 会连带隐藏rt，正确做法是用rp { visibility: hidden; }+rt { display: block; }
@supports 检测 ruby 是否可用不可靠，得用运行时探测
@supports(display: ruby) 或 @supports(ruby: display) 在所有主流浏览器中都返回 false，因为 CSS Ruby Module（CSS-RUBY-1）尚未被广泛实现，ruby 标签的布局能力由 HTML 解析器原生处理，不走 CSS display 值校验流程。所以不能靠它做样式降级分支。
真正可行的探测方式只有两个：
- 创建元素并检查其默认 display 值：
getComputedStyle(document.createElement('ruby')).display === 'ruby'（Chrome/Firefox 返回 true，Safari 17.5+ 返回 'inline'，但渲染行为正常；Safari 16.6 返回 'inline' 且内容不可见） - 更稳妥的是 DOM 存在性 + 内容可见性双重判断：
const r = document.createElement('ruby'); r.innerHTML = '<rb>漢</rb><rt>かん</rt>'; document.body.appendChild(r); const visible = getComputedStyle(r).height !== '0px'; document.body.removeChild(r); return visible;
ruby在无JS环境或JS失败时如何兜底
ruby 标签天生具备降级能力：当浏览器不支持时，rt 内容默认作为普通内联文本紧跟在 rb 后面显示，比如「漢」会退化为「漢かん」——这比完全丢失注音更可接受。但要注意两点：
- 不要把
rb和rt拆成独立段落，否则降级后变成「漢
かん」，语义断裂 - 避免嵌套其他块级标签（如
div）进ruby，旧版 Safari 会直接丢弃整个ruby块 - 如果项目必须支持 IE8–11，只能放弃
ruby，改用span+ 定位模拟，例如：<span class="ruby">漢<span class="rt">かん</span></span>，再配 CSS 控制垂直偏移
最常被忽略的一点：ruby 的语义价值远大于视觉效果。即使降级为「漢かん」，只要内容顺序保留，屏幕阅读器（NVDA、VoiceOver）在支持的浏览器中仍能正确朗读注音关系；而手动模拟的 span 方案，若没加 aria-label 或 role="annotation"，就彻底失去可访问性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
