ruby标签必须严格使用rb+rt结构，省略rb会导致现代浏览器降级为普通文本；rt须为ruby直接子元素，多字需拆分为多个ruby；line-height和font-size需手动优化以避免注音错位。
ruby 标签在自媒体网页中不是“加拼音的快捷键”，它一写错结构，Safari 就不渲染、屏幕阅读器就跳过、老邮件客户端直接平铺成“汉字hàn”，排版和语义全崩。
ruby 必须配 rb + rt 才能被现代浏览器识别
很多自媒体编辑器（如 Notion 导出、微信公众号后台、部分 CMS）会自动过滤或重写 HTML，把 rb 当冗余标签删掉，留下 <ruby>汉<rt>hàn</rt></ruby> —— 这种写法在 Chrome 115+ 和 Firefox 118 中已降级为普通文本，拼音贴在字右边，毫无上标效果。
- 必须显式写出
rb：<ruby><rb>汉</rb><rt>hàn</rt></ruby> -
rt必须是ruby的**直接子元素**，中间不能有空格、换行或span包裹 - 多字必须拆开：用两个独立
ruby，而不是一个ruby套两个字 + 一个rt - 别信“兼容写法”里省略
rb的旧教程——那是 2015 年前的 Safari 逻辑，现在已失效
注音错位、被截断？问题大概率出在 line-height 和 font-size
自媒体常用大字号标题（如 font-size: 28px），但 rt 默认继承父级 line-height，导致拼音被撑高、压字或换行脱节。浏览器不会自动缩放 rt 来适配基字高度。
- 给
ruby设line-height: 1.6～1.8，防止行高挤压拼音空间 - 给
rt设固定像素字号（如font-size: 12px），别用0.6em——em 会嵌套计算，容易失准 - 加
rt { line-height: 1; }，避免 Firefox 把拼音拉得过高 - 禁用
vertical-align: super或margin-top: -0.3em，这类模拟上移在缩放/换字体时必然偏移
动态注入拼音时，dangerouslySetInnerHTML 或 v-html 极易 XSS 和结构断裂
自媒体后台常从富文本字段拼接拼音 HTML，比如用 JS 拼出 `<ruby><rb>${char}</rb><rt>${pinyin}</rt></ruby>`。一旦 char 含 &、 或 Unicode 控制字符，DOM 就会解析失败，甚至执行恶意脚本。
- 绝不要直接字符串插值；用 DOM API 创建节点：
document.createElement('ruby')+appendChild - 若必须用
v-html，先过DOMPurify.sanitize(html, { ALLOWED_TAGS: ['ruby', 'rb', 'rt', 'rp'] }) - React 中确保
rt是ruby的**第一层子节点**，嵌套在span里会导致语义丢失 - 服务端返回空拼音时，跳过整个
ruby块，不要输出<rt></rt>—— 屏幕阅读器可能读作“空白注音”
移动端 Safari 对连续 ruby 的间距处理异常
在 iOS 17.4+ Safari 中，连续多个 ruby 元素之间会出现不可控的额外间隙（约 1–2px），尤其在 font-size > 20px 的标题中明显，看着像字距不均。
- 临时修复：给父容器设
font-size: 0，再给每个ruby单独设字号（如font-size: 24px） - 更稳方案：用
display: inline-flex包一层容器，但只用于视觉对齐，不替代ruby语义结构 - 别碰
letter-spacing或word-spacing—— 它们会影响基字本身，且对rt无效 - 测试重点不是 Chrome，而是真机 Safari 和微信内置 WebView（基于旧版 WKWebView）
真正难的不是写对标签，而是在 CMS 字段限制、编辑器自动清洗、多端渲染差异、无障碍要求四重约束下，让每个 ruby 都保持 rb/rt 严格配对、CSS 不破坏流式布局、降级后仍可读——这些细节一旦漏掉，用户看到的就不是拼音，是混乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
