移动端竖排文字注音显示异常？检查 ruby 与 rp 标签结构
当移动端竖排文字的注音显示异常时，应检查 ruby 标签内的 rt 元素是否被 rp 标签正确包裹。
检查 ruby 标签内的注音结构
移动端显示竖排文字注音时，浏览器需要通过 ruby 标签识别注音内容。如果 ruby 标签内直接放置了 rt 元素，而未使用 rp 标签包裹括号，部分浏览器可能无法正确渲染注音或括号。正确的结构要求每个 rt 元素必须被一对 rp 标签包裹，用于提供不支持 ruby 的浏览器的回退显示。检查时需确认 ruby 标签内是否包含 rt 元素，以及 rt 元素是否被 rp 标签包围。
在 HTML 结构中，ruby 标签用于包裹需要注音的字符和注音文本。注音文本应放置在 rt 元素中，而 rp 元素则用于包裹括号。例如，在显示汉字注音时，汉字与注音应分别位于 ruby 标签内，且注音文本必须被 rt 包裹，括号则由 rp 包裹。如果结构错误，如缺少 rt 或 rp，可能导致注音无法显示或显示为原始文本。检查时需逐层查看标签嵌套关系，确保每个注音块都符合 ruby、rt、rp 的层级要求。
验证 rp 标签的包裹位置与内容
rp 标签必须分别包裹在 rt 元素的开头和结尾，用于提供回退括号。检查时需确认每个 rt 元素前后都有对应的 rp 标签，且 rp 标签内的内容为括号字符。例如，对于注音文本“kan”，应确保结构为“<rp>(</rp><rt>kan</rt><rp>)</rp>”。如果 rp 标签位置错误或内容缺失，浏览器可能无法识别括号，导致注音显示异常。验证时可以查看源代码，确认每个 rt 元素前后都有完整的 rp 标签对。
rp 标签的内容通常为括号字符，用于在不支持 ruby 的浏览器中显示注音的回退文本。如果 rp 标签内放置了非括号字符，或缺少 rp 标签，可能导致注音显示不完整。检查时需确认每个 rt 元素前后都有 rp 标签，且 rp 标签内的内容为括号字符。例如，对于汉字“漢”，其注音结构应为“<ruby>漢<rp>(</rp><rt>kan</rt><rp>)</rp></ruby>”。如果结构不符合要求，注音可能无法正确显示。验证时可以查看源代码，确认每个注音块都包含完整的 rp 标签对。
排查浏览器兼容性导致的显示问题
rp 标签主要用于提供 ruby 注音的回退显示，支持 ruby 的浏览器会忽略 rp 标签的内容。如果浏览器不支持 ruby 注音，则会显示 rp 标签内的括号内容。检查时需确认浏览器是否支持 ruby 注音，以及 rp 标签的内容是否正确。例如，在不支持 ruby 的浏览器中，注音应显示为“漢 (kan)”。如果显示结果不符合预期，可能是 rp 标签的内容或位置不正确。验证时可以尝试在不同浏览器中查看页面，确认注音显示是否符合预期。
rp 标签的兼容性依赖于浏览器的支持情况。自 2015 年 7 月起，rp 标签在多数浏览器中已广泛可用。如果移动端浏览器不支持 ruby 注音，则会显示 rp 标签内的括号内容。检查时需确认浏览器是否支持 ruby 注音，以及 rp 标签的内容是否正确。例如，在不支持 ruby 的浏览器中，注音应显示为“漢 (kan)”。如果显示结果不符合预期，可能是 rp 标签的内容或位置不正确。验证时可以尝试在不同浏览器中查看页面，确认注音显示是否符合预期。
使用浏览器开发者工具检查标签结构
使用浏览器开发者工具可以检查 HTML 结构，确认 ruby、rt 和 rp 标签是否正确嵌套。打开开发者工具后，选择“元素”选项卡，找到需要检查的 ruby 标签，查看其内部结构是否包含 rt 元素，以及 rt 元素是否被 rp 标签包裹。如果发现结构错误，如缺少 rt 或 rp，可以手动修改 HTML 代码，确保每个注音块都符合要求。验证时可以查看源代码，确认每个注音块都包含完整的 ruby、rt 和 rp 标签。
开发者工具可以显示页面的 HTML 结构，帮助确认标签是否正确嵌套。检查时需找到 ruby 标签，查看其内部是否包含 rt 元素，以及 rt 元素是否被 rp 标签包裹。如果发现结构错误，如缺少 rt 或 rp，可以手动修改 HTML 代码，确保每个注音块都符合要求。例如，对于汉字“漢”，其注音结构应为“<ruby>漢<rp>(</rp><rt>kan</rt><rp>)</rp></ruby>”。验证时可以查看源代码，确认每个注音块都包含完整的 ruby、rt 和 rp 标签。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。