ruby标签本身无交互能力，不能响应点击事件；必须将rb（汉字）和rt（拼音）分别包裹在可交互元素中并单独绑定事件监听。
ruby 标签在拼音标注中为什么不能直接响应点击事件
ruby 是纯语义化内联标签，浏览器默认不赋予它交互能力，也不支持 onclick、tabindex 或 role="button" 等交互属性。如果你给 ruby 直接加点击逻辑，事件根本不会触发——因为它的渲染层被当作“装饰性文本”处理，DOM 中甚至可能被合并或忽略。
常见错误现象：ruby 外层套 div 或 span 后绑定事件，但点击位置落在 rt（拼音）上时，实际触发的是父容器的事件，无法区分是点了汉字还是拼音。
- 必须用
rb（汉字）和rt（拼音）分别包裹可交互单元，再各自添加事件监听 - 不能依赖
ruby自身捕获事件，要监听其子元素 - 部分旧版 Safari 对
rb/rt的 DOM 可访问性支持弱，需测试document.querySelector('ruby rt')是否返回有效节点
如何让每个汉字+拼音组合独立可点且样式可控
标准 ruby 结构是扁平的，但拼音互动游戏需要「点汉字高亮拼音」「点拼音播放读音」「长按弹出释义」等多状态操作，必须把每个字-音对拆成独立可操作块。
推荐结构：
<span class="char-unit"> <ruby><rb>好</rb><rt>hǎo</rt></ruby></span>
-
rb和rt都设display: inline-block，避免换行错位 - 给
.char-unit设position: relative，方便后续用absolute定位音标气泡或动画效果 - 为防 iOS Safari 忽略
rt的点击区域，加rt { pointer-events: auto; } - 不要用
ruby { user-select: none; }，否则会影响长按选中拼音进行复制的场景
拼音动态替换时 ruby 布局塌陷的修复方法
游戏常需实时切换拼音（比如纠错后显示正确读音），直接改 rt 文本内容会导致浏览器重排异常：拼音文字变长时挤占汉字位置，或变短时留白错位，尤其在小字号 + 行内密集排列下非常明显。
- 给
rb设固定width（如1.2em），并text-align: center，确保汉字始终居中 - 给
rt设font-size: 0.6em和line-height: 1，避免行高撑开 ruby 行距 - 替换拼音前先
rt.textContent = ''，再赋新值，防止浏览器因字体缓存导致宽度计算延迟 - 如需动画过渡，用
transform: scale()替代 width/height 变更，避免触发布局重排
兼容性边界：哪些浏览器会把 ruby 渲染成普通内联文本
IE 完全不支持 ruby；Android 4.4 WebView、部分国产浏览器内核（如早期 QQ 浏览器 X5）会降级为无样式纯文本；即使现代 Chrome/Firefox 支持良好，rt 的垂直对齐在不同字体下仍有像素级偏移。
- 必须提供降级方案：用
data-pinyin属性冗余存储拼音，当getComputedStyle(document.querySelector('rt')).display === 'none'时，用 JS 动态插入span模拟 ruby 效果 - 避免依赖
ruby { ruby-position: under; }，该属性仅在 Firefox 和较新 Chromium 中生效，其他环境会忽略 - 真机测试重点：微信内置浏览器（X5）、鸿蒙 WebView、低端安卓 Pad 的系统浏览器，它们对
rb/rt的盒模型解析最不稳定
真正难的不是写对 ruby 标签，而是判断什么时候该放弃它——比如需要拖拽排序拼音、做连读动画、或适配横竖排混排时，用 CSS Grid + 绝对定位反而更可控、更易调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
