ruby标签本身不渲染拼音，必须配合rb和rt才能生效；单独写汉hàn因缺失rb且rt未紧邻对应rb，现代浏览器会忽略注音或降级为“汉hàn”。
ruby 标签本身不渲染拼音，必须配合 rb 和 rt 才能生效；单独写 <ruby>汉<rt>hàn</rt></ruby> 在多数浏览器里会直接忽略注音，只显示“汉”字。
为什么 ruby 渲染不出来？常见失效原因
不是语法写错，而是结构或环境踩了坑：
-
rb元素被省略——rt必须对应一个显式rb，不能靠隐式文本（旧规范允许，但现代 Chrome/Firefox/Safari 已不兼容） -
rt没紧跟在rb后面，中间插入了空格、换行或其它标签，导致语义断裂 - CSS 中设置了
font-size: 0或line-height: 0，把rt内容压成不可见 - 父容器用了
display: flex或display: grid，意外重置了ruby的内联布局行为 - 在 Android 4.3 及更早 WebView、Outlook Desktop 等环境里，
ruby根本不解析，rt文本会平铺在汉字后面变成“汉hàn”
rb 和 rt 怎么配对才安全？
每个字/词都该有独立的 rb + rt 组合，别偷懒合并：
<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>dù</rt></ruby><ruby><rb>生</rb><rt>shēng</rt></ruby><ruby><rb>长</rb><rt>zhǎng</rt></ruby>
如果强行用一个 rb 包多个字（如 <rb>重庆</rb><rt>chóng qìng</rt>），拼音容易被压缩、断行错位，且屏幕阅读器无法准确播报单字读音。
怎么让 rt 拼音不挤在一起、带声调还清晰？
默认排版下，rt 是小号字体、上标位置，但空格会被当普通空白处理，声调符号可能偏移。关键控制点：
- 用
white-space: nowrap包住整个ruby，防止拼音在空格处断开 - 给
rt单独设font-size: 0.6em、line-height: 1，避免继承父级行高干扰 - 中文拼音带声调时，确保使用标准 Unicode 字符（如
hàn而非han4），否则字体可能 fallback 到不支持声调的字族 - 连续多个
ruby在 Safari 旧版中可能出现间距异常，可加font-size: 0到父容器，再对ruby和rb单独设字号
最易被忽略的是语义完整性：rt 必须是 ruby 的直接子元素，rb 不能嵌套块级标签，也不能放在 rt 后面——这些不报错，但一换浏览器或升级版本就突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
