sub标签默认下标位置不精准时，应显式用vertical-align和font-size微调，避免依赖浏览器内置偏移；需确保父元素形成行内格式化上下文，且vertical-align不与sub语义叠加使用。
sub标签默认下标位置不精准怎么办
<sub></sub> 标签本身等价于 vertical-align: sub，但它的实际偏移量由浏览器内部基线规则决定，不是固定像素值。不同字体、字号甚至同一字体在 Chrome/Firefox/Safari 中的下标位置可能有细微差异，尤其在化学式如 H<sub>2</sub>O 里，2 看起来偏高或偏低很常见。
不要指望只靠 <sub></sub> 就能对齐所有场景。真正可控的方式是显式叠加 vertical-align 和 font-size：
- 用
vertical-align: -0.3em或vertical-align: 15%微调位置（负值往下压，正值往上提） - 配合
font-size: 0.75em控制大小，避免默认缩放比例不一致 - 如果父容器
line-height过大，百分比值会失真——此时优先用em或px单位
vertical-align 在 sub 元素上设了却没反应
常见原因是父元素没形成“行内格式化上下文”。vertical-align 只对 display: inline、inline-block、table-cell 生效，而 <sub></sub> 默认就是 inline，所以问题往往出在它的**父级**：
- 父元素是
div且未设置line-height，会导致行框高度不可控，vertical-align失去参照基准 - 父元素用了
float或position: absolute，强制子元素变成block，vertical-align直接失效 - 父元素设置了
display: flex或display: grid，此时vertical-align完全不适用，得换用align-items或place-self
验证方法：给父元素加个 border: 1px solid red，再看 <sub></sub> 是否还在行内流动；如果不是，说明上下文已破坏。
化学式里多个 sub 怎么保持视觉统一
像 Ca<sub>3</sub>(PO<sub>4</sub>)<sub>2</sub> 这种嵌套结构，每个 <sub></sub> 默认独立计算基线，括号和数字容易错位。关键不是加更多标签，而是收编控制权：
- 把整个化学式包进一个
span，统一设font-variant-position: sub（现代浏览器支持，更语义） - 或者放弃
<sub></sub>，全用span+vertical-align: -0.25em+font-size: 0.7em，确保所有下标使用同一套偏移逻辑 - 避免混用
<sub></sub>和手动vertical-align，否则浏览器可能叠加计算，导致意外偏移
注意：CSS 的 font-variant-position: sub 不触发重排，性能略优，但 IE 完全不支持，需按需降级。
sub 和 vertical-align 同时用会叠加吗
不会叠加。浏览器把 <sub></sub> 解析为内置样式 vertical-align: sub，如果你再写 vertical-align: -0.2em，后者会**完全覆盖**前者，不是相加。这点和 margin 或 transform 不同。
也就是说：<sub style="vertical-align: -0.2em">2</sub> 的效果 = vertical-align: -0.2em，和 sub 语义无关，只是借用了标签名。这时候你其实可以换成普通 span，只要样式一致，可读性反而更高。
真正容易被忽略的是：当用 vertical-align 调整后，若父元素 line-height 没同步微调，整行文字的行高可能被撑开或压缩，影响段落节奏——这不是 bug，是 CSS 行盒模型的必然表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
