ruby注音必须严格遵循结构规范：需同时包含rb、rt、rp，rt必须为ruby直接子元素，多字须分多个ruby，rp用于降级兼容，css应使用相对字号并启用ruby-position: over。
单独写 ruby 标签没用，必须配 rt 才能显示注音；现代项目中还应显式加 rb 和 rp，否则 Safari 或旧 WebView 会错位、漏标甚至不渲染。
ruby 必须嵌套 rt，且 rt 必须是直接子元素
浏览器只把 rt 当作注音内容载体，ruby 本身只是语义容器。漏掉 rt，或把 rt 放在 ruby 外面（比如 <ruby>汉</ruby><rt>hàn</rt>），注音就完全不会出现。
-
rt必须是ruby的**直接子元素**，不能隔标签、空格或换行 - 写成
<ruby>汉<rt>hàn</rt></ruby>在 Chrome/Firefox 可能勉强显示，但 Safari 17+ 和 Android WebView 常降级为平铺文字“汉hàn” - 正确结构必须是
<ruby><rb>汉</rb><rt>hàn</rt></ruby>，rb显式声明基字，rt紧跟其后
多字必须拆成多个 ruby，不能共用一个 rt
中文注音是字级对齐，不是词级。一个 rt 无法自动分配给多个汉字，强行合并会导致拼音挤在一起、屏幕阅读器播报错乱、CSS 无法单独控制某字注音样式。
- 错误：
<ruby><rb>重庆</rb><rt>chóng qìng</rt></ruby>→ 拼音可能只贴在“庆”上，或被压缩变形 - 正确：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> - 多音字同理：
<ruby><rb>长</rb><rt>cháng</rt></ruby>度和 生<ruby><rb>长</rb><rt>zhǎng</rt></ruby>必须手动区分
rp 不是可选项，而是降级兼容的关键开关
rp 看似只是括号，实则决定老环境下的可读性。没有它，IE11、Outlook 邮件客户端、部分读屏软件会把拼音直接平铺在汉字后面，变成“汉hàn”，完全不可读。
-
rp必须成对出现，且严格嵌套在rt内：<rt><rp>(</rp>hàn<rp>)</rp></rt> - 现代浏览器会隐藏
rp，只渲染rt内容；不支持ruby的环境则显示“汉(hàn)” - 别写
<rp>(</rp><rt>hàn</rt><rp>)</rp>——rp必须在rt里面，否则无效
CSS 调整要避开常见陷阱
默认样式在各浏览器差异极大：Chrome 缩小居中，Safari 可能不缩放、垂直偏移，Firefox 行高易撑开。靠 margin-top 或 vertical-align 模拟上标，缩放或换字体时极易错位。
- 强制启用原生排版引擎：
ruby { ruby-position: over; } - 统一注音字号：
rt { font-size: 0.65em; line-height: 1; }，别用固定像素值（响应式下失准） - 禁用
position: absolute或visibility: hidden—— 降级后拼音直接消失，且破坏无障碍 - 连续多个
ruby在 iOS Safari 上偶有微小间距异常，可用父容器font-size: 0+ 子元素重设字号缓解
真正难的不是写对结构，而是意识到 ruby 不是“加拼音的快捷键”，而是一套需严格匹配、逐字维护、兼顾语义与降级的标注系统——少一个 rb，错位；漏一对 rp，降级即废；多一个空格，Safari 就可能不认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
