ruby标签是语义化注音容器，必须严格搭配rb与rt成对使用，逐字包裹、一一对应；省略rb或合并多字会导致safari错位、ios不渲染；需用css重置font-size、line-height和ruby-position确保跨浏览器一致。
ruby 标签不是“加拼音”的快捷按钮，它是一套有严格语义和结构约束的注音系统。不按规范写，Chrome 可能显示正常，Safari 或 iOS WebView 就会错位、缩放异常、甚至整段不渲染。
ruby 必须配 rb + rt 才能可靠生效
现代浏览器（Chrome 122+、Firefox 120+、Safari 17.4+）已不再兼容 <ruby>汉<rt>hàn</rt></ruby> 这类省略 rb 的写法。结构断裂会导致：
- 拼写错位：拼音贴到前一个字或后一个字上
- 屏幕阅读器无法识别基字与注音的对应关系
- 部分 Android WebView 直接忽略整个
rt
正确结构必须是：<ruby><rb>汉</rb><rt>hàn</rt></ruby>，且 rb 和 rt 必须一一紧邻、数量相等、顺序不可颠倒。
多字注音必须逐字拆开，不能共用 rt
写成 <ruby><rb>汉字</rb><rt>hàn zì</rt></ruby> 表面能出字，但实际埋下三个隐患：
- CSS 无法单独控制“汉”或“字”的拼音字号/颜色
- 响应式缩放时，两个拼音可能被压扁或断行错开
- 语音合成（TTS）工具无法按字节切分，易读成“hàn-zì”连音而非两个独立音节
真实项目中应强制逐字包裹：<ruby><rb>汉</rb><rt>hàn</rt></ruby><ruby><rb>字</rb><rt>zì</rt></ruby>。地名如“重庆”也必须拆：<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>。
样式重置必须覆盖 font-size、line-height 和 ruby-position
浏览器对 rt 的默认渲染差异极大：Chrome 缩放为 50% + 上标，Safari 可能不缩放、不居中、垂直偏移明显。靠 vertical-align: super 模拟是危险的——它依赖行高计算，换字体就偏。
- 必须设
rt { font-size: 0.65em; line-height: 1; }，避免上下留白撑开行距 - 用
ruby { ruby-position: over; }触发原生排版引擎，比margin-top稳定得多 - 加
ruby { display: ruby; }强制 Safari 识别容器类型（Firefox/Chrome 也认） - 若需下方注音，只在支持的环境用
ruby { ruby-position: under; }（Chrome 122+、Safari 17.4+）
rp 不是装饰，是降级保底的关键开关
rp 不是用来“加括号好看”的，它是给 IE11、Outlook 桌面版、老旧邮件客户端等不支持 ruby 的环境提供 fallback 的唯一手段。没有它，降级后就是“汉hàn”连写，完全不可读。
标准写法是：<ruby><rb>你</rb><rt><rp>( </rp>nǐ<rp> )</rp></rt></ruby>。注意三点：
-
rp必须成对嵌套在rt内，内容只能是纯括号字符（(、)、[、]） - 现代浏览器自动隐藏
rp，只渲染rt；老环境则显示“你(nǐ)” - 如果项目明确不跑 IE 或 Outlook，可省略
rp，但 CMS 输出或邮件模板中务必确认下游是否真能忽略
最常被忽略的细节是：动态生成时若拼音字段为空，千万别输出空 <rt></rt>——某些屏幕阅读器会播报“空白注音”，造成语义污染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
