ruby标签仅提供语义结构，不支持个性化样式；需用css重写布局或改用span+aria模拟注释效果。
直接说结论：ruby 标签本身不支持自定义样式“个性化”，它只提供语义结构；真要实现视觉上灵活的注释效果（比如倾斜、换色、悬停显示），得靠 CSS 重写布局，甚至放弃 ruby 改用 span + data-* 属性模拟。
为什么 ruby 在浏览器里看起来总不听使唤
因为主流浏览器对 ruby 的默认渲染逻辑高度受限：只认 rb（基文）、rt（注音）、rp（括号降级 fallback）三类子元素，且强制按“上下堆叠”排版，display: flex 或 position: absolute 在 ruby 内部基本失效。你给 rt 加 transform: rotate(-15deg)，大概率没反应——不是写错了，是浏览器压根不响应。
常见错误现象包括：
-
rt文字不居中、偏左或溢出容器 - 设置
font-size: 0.7em后整体缩放失常，尤其在 Safari 中 - 用
@media做响应式调整时，ruby内部尺寸计算完全不按 CSS 盒模型走
用 CSS 强制接管 ruby 渲染的实操条件
只有满足以下全部条件，才能让 ruby 看起来“个性化”一点：
- 目标浏览器为 Chrome 110+ / Edge 110+ / Firefox 115+（旧版 Safari 几乎不可控）
- 必须显式重置
ruby的 display 类型：ruby { display: inline-block; }，否则无法设宽高 -
rt必须脱离原始流：rt { position: relative; top: -0.5em; }，不能依赖vertical-align - 禁用原生 ruby 行为：
ruby { ruby-position: over; ruby-align: center; }只起微调作用，别指望它解决定位问题
示例（让注音右上角小字号显示）：
<ruby><rb>漢</rb><rt>ㄏㄢˋ</rt></ruby><p><style>
ruby { display: inline-block; }
rb, rt { display: block; }
rt {
font-size: 0.65em;
position: relative;
top: -0.4em;
left: 0.15em;
color: #666;
}
</style></p>
更靠谱的替代方案：不用 ruby 标签也能语义化
如果你真正需要的是“可维护、可访问、能适配屏幕阅读器的注释”，又不想被浏览器对 ruby 的限制卡死，推荐用 span 模拟，并补全 ARIA 属性：
- 用
span class="annotation"包住注释文字，基文保持普通文本 - 加
aria-label描述关系：<span aria-label="漢，读作ㄏㄢˋ">漢</span> - 配合
data-rt="ㄏㄢˋ"属性，方便 JS 动态挂载 tooltip 或切换显示 - 这样写 CSS 完全自由：
.annotation::after、hover、@container全都可用
关键点在于：屏幕阅读器会读 aria-label，搜索引擎能识别语义，而视觉层彻底摆脱了 ruby 的排版枷锁。
真正难的不是怎么让注音变颜色或旋转，而是判断当前项目是否真的需要原生 ruby 的语义保障——多数内部系统、多语言学习工具、甚至出版级网页，其实更适合用可控性更强的模拟方案。浏览器对 ruby 的支持，至今仍像一个“有标准但没共识”的半成品。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
