默认ruby和rt样式不能直接使用，因浏览器渲染逻辑不统一：chrome将rt渲染为小号上标居中，firefox存在垂直位置偏移和行高异常，safari常忽略对齐致拼音贴顶或被裁剪；规范允许引擎自由实现baseline对齐，故必须显式声明display: ruby、固定rt字体大小（如12px）、设置line-height协同、禁用vertical-align: super，并加white-space: nowrap防换行断裂。

为什么默认的ruby和rt样式不能直接用

浏览器对ruby的渲染逻辑不统一：Chrome 把 rt 渲染成小号上标、居中；Firefox 可能压低位置、line-height 计算异常；Safari 则常忽略垂直对齐，导致拼音贴着汉字顶部甚至被裁剪。这不是 bug，而是规范允许各引擎自由实现 baseline 对齐方式——所以「不加 CSS 就能跨端一致」根本不存在。

ruby必须显式声明display: ruby

部分 Safari 版本（尤其是 iOS 16.4 之前）无法自动识别未声明 display 的 ruby 元素，导致 rt 被当普通内联文本流排版。FireFox 和 Edge 也对 display 推断更严格。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 必须写：ruby { display: ruby; }，不能依赖浏览器默认
• 别加 display: inline 或 display: block——会彻底破坏 ruby 布局语义
• 如果用了 CSS-in-JS 或 scoped style，确认该规则没被局部作用域隔离掉

rt的字体与行高要固定像素控制

用 font-size: 0.7em 这类相对值，在不同字号上下文里缩放结果不可控；移动端缩放、系统字体设置变更后，rt 容易偏移或挤进基字里。

• 推荐：rt { font-size: 12px; line-height: 1.2; }
• 配合：ruby { line-height: 1.8; } 留出足够垂直空间，防止拼音被截断
• 禁用 vertical-align: super——它按行高基准偏移，不是按基字中心，缩放后必错位
• 加 ruby-position: over; 显式声明位置，覆盖浏览器默认 fallback 行为

防换行断裂的关键是white-space: nowrap作用范围

像「第ruby123ruby页」这种结构，在窄屏下「123」可能折到下一行，但拼音还挂在上一行末尾，视觉完全脱节。

• 只给含 ruby 的内联片段加：ruby + ruby, ruby ~ ruby { white-space: nowrap; } 或用 wrapper 元素包住整组
• 别在 p 或 div 上全局设 white-space: nowrap，否则正文无法换行
• 数字/英文混排时，rb 内容若含空格（如“第 一 百”），要用零宽空格 ​ 替代，否则 nowrap 失效

真正容易被忽略的是：动态注入注音时，若某字拼音为空字符串，服务端或 JS 不应输出 <rt></rt>——这会让屏幕阅读器读作「空白注音」，且部分安卓 WebView 会因此触发 layout 异常。空值必须跳过整个 rt 标签。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！