现代浏览器渲染 ruby 失败主因是结构不合法：必须显式用 rb 包裹基字，且 rb 与 rt 同级紧邻；多字需逐字拆分 ruby；css 需重置 rt 的 font-size、line-height 等以确保跨浏览器一致。
ruby 标签在现代浏览器中渲染失败，基本可以断定是结构不合法——不是 CSS 没调好，而是浏览器压根没把它当注音处理。
为什么写了 ruby 和 rt 却不显示拼音
核心原因：缺了 rb。Chrome 120+、Firefox 125+、Safari 17+ 已强制要求显式 rb 包裹基字，否则降级为平铺文本（如“汉hàn”）。rb 不是可选标签，是语义锚点。
-
ruby必须直接包含rb和rt，二者必须同级、紧邻，不能有换行或空格隔开 - 错误写法：
<ruby>汉<rt>hàn</rt></ruby>（无rb） - 正确写法：
<ruby><rb>汉</rb><rt>hàn</rt></ruby> - 非汉字字符（如数字、英文、emoji、全角标点）也必须原样包进
rb，否则结构断裂
多字注音怎么避免错位和堆叠
一个 ruby 只能对应一个基字 + 一个 rt。把“北京”塞进同一个 ruby，rt 就失去对齐依据，Safari 易偏移，Android WebView 可能裁掉。
- 逐字拆分：
<ruby><rb>北</rb><rt>běi</rt></ruby><ruby><rb>京</rb><rt>jīng</rt></ruby> - 禁用
vertical-align: super或margin-top模拟上标——会破坏屏幕阅读器识别和缩放行为 - 若父容器设了
line-height: 1或overflow: hidden，rt极易被裁剪，需检查父级样式 - 连续多个
ruby在 Safari 中偶有轻微水平偏移，加ruby { ruby-position: over; }可稳定对齐
CSS 控制 rt 显示效果的关键项
不同浏览器对 rt 的默认渲染差异大：Chrome 垂直居中较准，Safari 可能偏高，Firefox 行高拉得过长。靠继承或浏览器默认值不可靠。
- 必须重置：
rt { font-size: 0.6em; line-height: 1; }（不用 px，确保缩放时比例一致） -
ruby { line-height: 1.6; }防止基文被压缩变形 - 禁用
position: absolute、visibility: hidden——降级后拼音消失，且破坏无障碍访问 - 不要用
text-indent或letter-spacing调整拼音间距，会导致声调符号错位
动态生成 ruby 结构最容易踩的坑
用 JS 拼字符串注入，稍有不慎就 XSS 或 DOM 断裂。pypinyin、pinyin-pro 等库只管拼音，不管 HTML 合法性。
- 别直接拼：
`<ruby><rb>${char}</rb><rt>${pinyin}</rt></ruby>`—— 若char含&或，整个结构崩溃 - React/Vue 中务必保证
rt是ruby的**直接子元素**，嵌套span会导致语义失效 - 用
DOMPurify.sanitize()过滤后再插入，允许的 tag 仅限['ruby', 'rb', 'rt', 'rp'] - 多音字、轻声、儿化音（如“花儿”→
huā ér）必须人工校对，ruby不解析语义
最常被忽略的是：rb 的强制存在性、非汉字字符的包裹义务、以及动态注入时的 XSS 防御——这三处出错，再精细的 CSS 也救不回渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
