ruby标签本身不支持background-color和border，需对子元素rt设display: inline-block后方可生效，且rb需同步样式以保证视觉统一。
ruby标签本身不支持background-color和border
ruby 是语义化内联标签，用于标注汉字读音（如拼音），浏览器默认将其渲染为行内内容，且不继承块级样式行为。直接对 ruby 设置 background-color 或 border 通常无效——多数浏览器会忽略，或仅在极窄的 baseline 区域渲染出不可见的“边框线”。
必须用rt或rp配合包裹才能生效
真正能加背景和边框的是它的子元素：rt（读音）和可选的 rp（括号 fallback）。但要注意：
-
rt默认是行内元素，需先设display: inline-block或display: block才能让background-color和border占据完整区域 -
rp仅在不支持ruby的旧浏览器中显示括号，现代浏览器默认隐藏，一般不建议对其设样式 - 若想让整个 ruby 组合（字 + 拼音）有统一背景，得用外层
span或div包裹，再设样式
示例：
<ruby><rb>鼎</rb><rt style="display: inline-block; background-color: #ffeb3b; border: 1px solid #ffc107; padding: 0 4px;">ding</rt></ruby>
兼容性与排版风险要手动兜底
即使加了 display: inline-block，不同浏览器对 ruby 内部基线（baseline）、行高、上下间距的处理仍有差异：
- Chrome 和 Firefox 表现接近，但 Safari 对
rt的垂直对齐可能偏高或偏低 - 设置
line-height或vertical-align容易破坏原有语义排版，尤其多字连续 ruby 时 - 如果项目需支持 IE 或老 Android WebView，
ruby标签基本不可用，应降级为span嵌套模拟
真正稳定的做法：只对 rt 设小范围背景（如浅色底+细边框），避免拉伸高度；所有涉及精确定位、响应式缩放的样式，都应在外层容器控制。
别忘了rb也需要显式设样式才能匹配视觉
rb 是被标注的主体文字，默认不继承 ruby 的样式。如果你给 rt 加了黄色背景，而 rb 还是默认白底黑字，整体就会割裂：
- 要么统一给
ruby rb和ruby rt设相同background-color和padding - 要么用
ruby { background-color: ... }配合ruby > *通配，但注意这会影响所有子元素（包括rp） - 更稳妥的是用类名隔离，比如
<ruby class="ruby-pinyin"><rb class="ruby-base">...</rb><rt class="ruby-annot">...</rt></ruby>，再单独控制
最常被忽略的一点：没有显式设 font-size 或 line-height 时，rt 的字号可能比 rb 小（浏览器默认为 50%~70%），导致背景块高度不一致——这个细节几乎每次调样式都会踩一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
