HTML5中Ruby注音需rb与rt成对嵌套于ruby容器内，单独使用或结构错误会导致错位；CSS须设font-size、line-height等触发浏览器内置排版逻辑，并禁用破坏流式布局的样式。
如果您在网页中为汉字添加拼音时发现注音错位、被截断或根本不显示，则可能是由于 HTML 结构不完整或 CSS 缺失导致。以下是实现正确注音排版的极简操作步骤：
一、确保使用标准 ruby 结构
浏览器仅识别 rb + rt 成对嵌套在 ruby 容器内 的结构，单独使用或遗漏
1、为每个汉字分别包裹
2、每个
立即学习“前端免费学习笔记（深入）”；
3、可选添加
4、示例代码：<ruby><rb>汉</rb><rt>hàn</rt><rp>(</rp></ruby>。
二、启用基础 CSS 渲染支持
默认情况下，
1、为
2、为包含 ruby 的父容器设置 line-height: 1.8，避免行高挤压导致拼音被截断。
3、添加 ruby-align: center，显式声明拼音水平居中对齐（部分旧浏览器需此声明）。
4、对整组 ruby 添加 white-space: nowrap，防止换行破坏字-音对应关系。
三、使用 pinyin-pro 库自动生成合法结构
手动编写 ruby 结构易出错，pinyin-pro 可自动输出语义正确、带 class 的 HTML 字符串，规避 rb/rt 错位风险。
1、安装库：npm install pinyin-pro。
2、在 JavaScript 中调用：import { html } from 'pinyin-pro'; const str = html('汉字');。
3、输出结果自动包含
4、配合 CSS 规则：.py-pinyin-item { font-size: 12px; color: #666; }，实现开箱即用的样式控制。
四、验证浏览器兼容性与回退机制
所有现代浏览器（Chrome 110+、Firefox 115+、Safari 17+、Edge 110+）均原生支持 ruby，但需确认是否启用中文排版特性。
1、检查页面是否声明了 lang="zh-CN" 属性，有助于激活东亚文字排版引擎。
2、在不支持 ruby 的环境（如 IE11 或老旧移动 WebView）中，
3、禁用 position: absolute 等破坏流式布局的 CSS，否则会切断屏幕阅读器对 ruby 语义的识别。
4、避免对
