直接改ruby标签样式几乎无效，因其是格式化上下文容器，rt和rp有独立渲染层；需单独设置rt{font-size:0.6em;top:-0.45em;}和rp{display:none;}才能精准控制注音显示。
直接改 <ruby></ruby> 标签的样式几乎无效——浏览器对它的默认渲染逻辑极强，CSS 选择器作用范围窄、继承行为异常，强行加 font-size 或 color 很可能只影响基文（base text），而忽略注音（ruby text）。
为什么直接写 ruby { color: red; } 不生效
因为规范规定 <ruby></ruby> 是一个“格式化上下文容器”，内部的 <rt></rt>（ruby text）和 <rp></rp>（fallback parentheses）有独立的渲染层。多数浏览器（Chrome/Firefox/Safari）默认将 <rt></rt> 渲染为小号、上标式文字，且其 font-size 是相对于父元素 *计算后固定缩放* 的，不是继承值。
常见错误现象：
- 给
ruby设font-size: 16px，rt仍显示为 9–10px - 用
ruby > rt设置颜色，部分浏览器（如旧版 Safari）完全忽略 - 加
display: inline-flex破坏原有垂直对齐，导致注音错位
rt 和 rp 必须单独重置样式
真正可控的节点是 <rt></rt> 和包裹它的 <rp></rp>。你需要显式覆盖它们的字体、行高、位置和显示行为：
-
rt默认是display: ruby-text（非标准 display 值），要兼容就得降级为display: inline或display: inline-block -
rp默认显示括号，但很多场景需隐藏：rp { display: none; } - 为避免缩放失真，建议用
em或rem控制rt尺寸，例如：rt { font-size: 0.65em; line-height: 1; } - 垂直偏移靠
position: relative+top最稳妥，比如：rt { position: relative; top: -0.5em; }
示例片段：
ruby {
line-height: 1.8;
}
rt {
font-size: 0.6em;
line-height: 1;
position: relative;
top: -0.45em;
letter-spacing: 0.05em;
}
rp {
display: none;
}
响应式注音适配：移动端必须处理的断行问题
在窄屏下，<ruby><rb>漢</rb><rt>ㄏㄢˋ</rt></ruby> 容易被强制折行，导致注音脱离汉字。这不是 bug，而是浏览器对 ruby 布局的默认断行策略。
解决方法只有两个有效路径：
- 强制禁用断行：
ruby { white-space: nowrap; }，但会牺牲长文本可读性 - 用
ruby { ruby-position: under; }切换到下方注音（更适应移动端阅读习惯），再配合媒体查询切换：@media (max-width: 480px) { ruby { ruby-position: under; } rt { top: 0.3em; } }
注意：ruby-position 在 Safari 16.4+ 和 Chrome 117+ 才稳定支持，旧版本需 fallback 到 JS 检测 + class 切换。
最常被忽略的是 ruby-align —— 它控制多个汉字共用一条注音时的对齐方式（如「一二三」对应「yī èr sān」），默认是 center，但若注音长度差异大，会出现视觉漂移。真正在意排版精度时，得手动设 ruby-align: start; 并搭配 text-align: left; 统一基线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
