HTML中ruby标签的兼容性与写实案例-html教程-PHP中文网

ruby 在现代浏览器中存在兼容性硬伤：safari 需显式设 display: ruby 并用 ruby-position: over、禁用 rp 标签、ie/旧安卓需服务端降级；必须逐字标注、人工处理多音字，并补充 aria-label 保障可访问性。

html中ruby标签的兼容性与写实案例

ruby 标签在现代浏览器中基本可用，但「能渲染」不等于「能稳定用」—— Safari 的 vertical-align 偏移、Chrome 里 rp 括号意外显示、IE/旧安卓 WebView 完全忽略 rt，都是上线前必须实测的硬伤。

这不是 bug，是 Safari 对 ruby 的 display 计算逻辑和 Chrome/Firefox 不一致。它默认不把 ruby 当作语义容器触发排版引擎，而是按普通内联元素处理基线对齐。

必须显式写 ruby { display: ruby; }，强制 Safari 启用原生 ruby 渲染路径
rt 的 vertical-align 别设 super 或 text-top —— 这些是模拟上标，会叠加行高导致飘移；改用标准属性 rt { ruby-position: over; }
字号别用百分比（如 font-size: 70%），Safari 以父级 ruby 字号为基准，Chrome 可能以根字体为准；统一用像素值：rt { font-size: 12px; line-height: 1; }
连续多个 ruby 并列时，Safari 有时会多出不可见间距；可在父容器加 font-size: 0，再给每个 ruby 单独设 font-size: 24px

问题出在 rp 标签。Chrome 把 <rp>(</rp> 当作可见文本渲染，Safari 则按规范隐藏它作为 fallback。同一段 HTML，在两个浏览器里视觉分裂。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

rp 必须严格嵌套在 rt 内部，且内容只能是纯括号字符：<rt><rp>(</rp>hàn<rp>)</rp></rt> —— 多一个空格或字母就失效
最稳方案：服务端或构建时检测 UA，对 Blink/WebKit 内核（Chrome/Edge/Safari）直接移除整个 rp 标签；老 Firefox/IE 浏览器才保留
次选方案：CSS 强制隐藏，但作用域要收窄，避免误杀其他 rp：ruby rt rp { display: none !important; }
千万别用 JS 动态删 rp —— 首屏闪动明显，SSR 场景下用户先看到括号再消失，体验极差

这些环境完全不解析 ruby/rt，会把 rt 当作未知标签丢弃，但里面的文本内容仍作为普通文本流输出，结果就是「汉hàn」连在一起，无法阅读。

不能依赖 html5shiv.js 补丁 —— 它只修复新标签识别，不实现 ruby 渲染逻辑
若必须兼容，应在服务端做降级：检测 UA 后，对不支持环境输出 <span aria-label="hàn">汉</span>，兼顾可访问性和视觉 fallback
禁止给 rt 加 visibility: hidden 或 position: absolute —— 降级后文字直接消失，用户啥都看不到
关键信息（如考试题干、操作指引）别用 ruby 注音 —— 降级后语义断裂，易引发误读

必须逐字。整词套一个 ruby 看似省事，但基字与拼音无法一一对应，浏览器无法对齐，尤其在字体变化、缩放或不同 DPI 下极易挤叠或错位。

正确：<ruby>重<rt>chóng</rt></ruby><ruby>庆<rt>qìng</rt></ruby> —— 每个字独立控制，声调、变调、轻声都可人工校对
错误：<ruby>重庆<rt>chóng qìng</rt></ruby> —— “重庆”两字宽度不同，“chóng qìng”会被压扁，且无法响应单独选中“庆”字触发朗读
多音字必须靠上下文判断，ruby 不解析语义 —— “长”在“长度”中读 zhǎng，在“生长”中读 cháng，得人工写对，不能留空或塞多个音
屏幕阅读器多数跳过 rt，如需 TTS 支持，额外加 aria-label：<ruby>否<rt>pǐ</rt></ruby> → <ruby aria-label="pǐ">否<rt>pǐ</rt></ruby>