ruby标签不能直接包裹块级元素，浏览器会静默忽略非法子节点，仅保留rb、rt、rp及文本；它属于phrasing content，只接受行内级内容。
ruby标签不能直接包裹块级元素
浏览器会静默忽略不符合规范的嵌套，比如把 <div> 或 <p> 放进 <ruby> 里——它不会报错，但解析器会丢弃非法子节点，只保留合法的 <rb>、<rt>、<rp> 和文本。HTML5 内容模型明确将 <ruby> 归为 phrasing content（语句型内容），它只接受行内级内容，不接受任何块级元素。
常见错误现象包括：
- 脚注文字消失或错位
- 后续段落被意外吞掉（因解析器尝试“修复”结构）
- DevTools 中看到
<ruby>节点下子节点数量少于预期
想给带ruby的文字加段落样式？用CSS而不是改结构
如果目标是让 ruby 注音文字参与段落排版（比如缩进、首行下沉、与前后 <p> 对齐），别试图往 <ruby> 里塞 <p>，而是把它保留在行内位置，再用 CSS 控制其父容器：
-
<p><ruby><rb>汉字</rb><rt>hàn zì</rt></ruby> 是基础。</p>—— 正确：ruby 在段落内作为行内成分存在 - 对
<p>设置text-indent、line-height，ruby 自然跟随 - 若需 ruby 单独成“行”，给外层
<span>或<div>包裹后设display: block，而非塞进 ruby 内部
rt和rb的display默认值影响对齐效果
<rb> 和 <rt> 默认是 display: inline，但它们的渲染行为受字体基线、行高、垂直对齐共同影响。容易踩的坑有：
立即学习“前端免费学习笔记（深入）”；
- 中文环境下
<rt>常偏高，因为浏览器按西文字体基线对齐；加vertical-align: text-top或top更稳 -
<rb>若含空格或换行，会被当作文本节点处理，导致注音错位；建议写成紧贴形式：<rb>汉</rb><rb>字</rb> - 某些旧版 Safari 对
<rp>的隐藏逻辑不一致，建议始终配对使用：<rp>(</rp><rt>hàn</rt><rp>)</rp>
ruby在Flex/Grid布局中容易被“压扁”
当 <ruby> 作为 Flex item 或 Grid cell 的直接子元素时，它的行内特性可能与容器的尺寸约束冲突，表现为注音挤在一起、<rt> 被截断或丢失。这是因为 flex/grid 默认对齐方式（align-items: stretch）会拉伸行内元素的行框，而 ruby 不是单一行框。
解决方案很简单：
- 给
<ruby>显式设置display: inline-flex或display: inline-grid（仅当需内部微调时） - 更推荐：在外层加一层
<span>并设display: block，让 ruby 保持原始行为，由父容器控制布局 - 避免对
<ruby>直接设width或height—— 它的宽高由内容和字体决定，硬设会导致<rt>溢出或裁剪
最常被忽略的一点：ruby 的语义是“注音/说明性标注”，不是“容器”。它的排版稳定性永远依赖于周围行内上下文的完整性。一旦强行把它拖进块级逻辑里，问题就从样式层下沉到解析层，调试成本陡增。
