应显式重置ruby行高为1.8或normal，避免全局line-height继承导致注音挤压；用data属性或类名隔离rt样式，禁止单独设置rt的line-height，多语言需按data-lang分设font-size与line-height。
ruby标签被全局 * { line-height: 1.2 } 覆盖怎么办
ruby本身不自带行高，它完全依赖父容器或全局样式继承。一旦项目里有 * { line-height: 1.2 } 或 body { line-height: 1.4 }，ruby的注音（rt）和基文（rb）就会挤压、重叠甚至消失。
这不是 ruby 的 bug，而是 CSS 层叠规则的必然结果：通配符选择器权重虽低，但胜在“无处不在”+“后加载即覆盖”。尤其在微前端或老项目中，normalize.css 或 reset.css 往往悄悄注入了这类全局 line-height。
- 最直接的解法是显式重置 ruby 容器的
line-height：写ruby { line-height: 1.8; }或更稳妥的ruby { line-height: normal; } - 若用 CSS Modules 或 scoped style，确保该规则被正确作用域化——否则它可能被父应用的
div p { line-height: 1.3 }穿透覆盖 - 避免对
rt单独设line-height：浏览器对 rt 的行高计算逻辑特殊，单独设值易导致基线错位；应统一控制ruby根元素
rt 元素被全局 a:hover 或 .text-small 意外影响
全局类如 .text-small 或选择器如 a:hover rt 会穿透进 ruby 内部，因为 rt 不是 shadow boundary，它和普通 inline 元素一样参与全局层叠。
常见现象：鼠标悬停到链接上，链接里的 ruby 注音突然变小/变色；或者整个页面加了 .text-small { font-size: 12px; }，导致所有 rt 缩成一条线。
立即学习“前端免费学习笔记（深入）”；
- 不要靠提高选择器权重硬怼（比如写
ruby rt { font-size: 14px !important }），这会让后续维护雪上加霜 - 推荐方案：给 ruby 外层加唯一 data 属性，如
<ruby data-ruby="zh-pinyin">，再配合构建时前缀（PostCSSpostcss-css-namespace）生成[data-ruby="zh-pinyin"] rt { font-size: 14px; } - 若无法改构建链路，至少在初始化脚本里动态加 class：
document.querySelectorAll('ruby').forEach(r => r.classList.add('ruby-isolated'))，然后用.ruby-isolated rt控制
使用 Shadow DOM 隔离 ruby 时的常见失效点
想彻底隔绝外部样式？attachShadow({ mode: 'closed' }) 是唯一可靠路径。但很多人卡在第一步：把 <ruby><rb>汉</rb><rt>hàn</rt></ruby> 直接塞进 shadowRoot.innerHTML，结果注音还是被污染。
原因很实在：shadowRoot.innerHTML = htmlString 会把内联 <style> 当作文本节点丢弃，而你没手动提取并注入 CSSStyleSheet。
- 必须在自定义元素
constructor()中调用this.attachShadow({ mode: 'closed' })—— 拖到connectedCallback就晚了，DOM 已渲染，样式已计算 - 禁止用 innerHTML 注入含
<style>的字符串；正确做法是用DOMParser解析 HTML，提取<style>内容，转为CSSStyleSheet实例，再赋给shadowRoot.adoptedStyleSheets = [sheet] -
adoptedStyleSheets不支持@import和相对路径（如url(./dot.png)），这些资源得提前fetch并转为 blob URL 或 base64
多语言 ruby（如日文 furigana + 中文拼音）共存时的样式冲突
一个页面同时存在 <ruby data-lang="ja"><rb>漢字</rb><rt>かんじ</rt></ruby> 和 <ruby data-lang="zh"><rb>汉字</rb><rt>hàn zì</rt></ruby>，若只写 rt { font-size: 10px; }，两种注音都会被压扁。
问题本质不是 ruby，而是字体度量差异：日文假名需要更高行高、更宽松字距，中文拼音则需更紧凑的 baseline 对齐。
- 别用同一套
rt规则通吃；应按data-lang分开控制：[data-lang="ja"] rt { font-size: 11px; letter-spacing: 0.05em; }，[data-lang="zh"] rt { font-size: 10px; line-height: 1.2; } - 禁用
font-family全局继承；ruby 内部的rt应显式指定等宽或无衬线字体，避免系统默认中文字体强行渲染假名 - 注意
direction和writing-mode：日文竖排需writing-mode: vertical-rl，此时rt默认位置会变，必须用ruby-position: over显式固定
真正难的不是写对一行 CSS，而是搞清 ruby 的渲染生命周期和样式注入时机——它既不像普通 inline 元素那样“裸奔”，也不像 Shadow DOM 那样“自闭”。多数冲突，都发生在你以为它被隔离了，其实只是还没被覆盖到的那个时间差里。
