ruby标签专用于东亚文字注音，不能作卡片布局容器，因其语义固定、样式受限且影响可访问性；正确卡片结构应使用article+header+h3+div组合，ruby仅在需注音的文本处局部使用。
ruby 标签不是用来做卡片布局的，它专用于中文、日文等东亚文字的注音（如拼音、假名），强行塞进卡片结构里只会破坏语义、影响可访问性，还可能被屏幕阅读器误读。
为什么ruby不能当卡片容器用
浏览器对 ruby 的渲染逻辑是固定的：它只接受 rb（基字）、rt（注音）、rp（括号 fallback）三类子元素，且默认为行内表现。你没法给它设 display: flex、width 或 padding —— 即使加了，多数样式会被 UA stylesheet 覆盖或忽略。
常见错误现象：
- 写
<ruby class="card"><rb>商品</rb><rt>shāng pǐn</rt></ruby>，结果卡片样式完全不生效 - 用
ruby包住图片+标题+价格，Chrome 渲染出错，Firefox 直接折叠内容 - 想靠
ruby实现“标题+副标题”堆叠效果，但语音朗读时把副标题当成注音念出来
真正适合卡片布局的 HTML 结构
语义清晰、样式可控、无障碍友好 —— 这三点必须同时满足。推荐用以下组合：
- 外层用
<article></article>或带role="article"的<div> 表明独立内容单元 <li>标题区用 <code><header></header>+<h3></h3>（别用h1，卡片内标题层级要降级） - 主体内容用
<div class="card-body">，里面按需嵌套 <code><img>、<p></p>、<ul></ul>等标准元素 - 需要注音时，才在具体文字上局部使用
ruby，例如：<ruby><rb>卢浮宫</rb><rt>lú fú gōng</rt></ruby> - 确保
rb和rt成对出现，且rb里只放纯文本，不要嵌套标签 - 避免在
ruby外层加浮动、绝对定位等破坏流式布局的样式 - 测试屏幕阅读器行为：VoiceOver 和 NVDA 默认会把
rt作为括号内读出，若你不希望这样，得加aria-hidden="true"到rt上，并用aria-label在rb上补全信息 - CSS 中可用
ruby { line-height: 1.6; }微调垂直间距，但别碰ruby::before这类伪元素 —— 它们不受规范支持
如果真要显示带注音的卡片文字
只在极少数场景下需要：比如多语言教育类卡片、古籍展示页、汉字学习工具。这时 ruby 应该是“内容的一部分”，而不是“布局工具”：
真正难的不是怎么把 ruby 塞进卡片，而是想清楚：这个注音信息是否属于用户必须感知的核心内容？如果不是，就别用；如果是，就让它安静待在该出现的文字旁边，别让它承担布局责任。
