Firefox中checkbox伪元素对齐错位的根因是其对vertical-align基线计算更严格，将伪元素锚点默认对齐文字基线而非中线；Chrome/Safari则常fallback至middle而显正常。
Firefox 中 checkbox 伪元素对齐错位的根因
不是你 ::before 写错了，是 Firefox 对 vertical-align 的基线计算更严格，尤其在 label 包含文字时，默认把伪元素锚点对齐到文字基线（而非中线），导致视觉上“飘高”或“下沉”。Chrome/Safari 常默认 fallback 到 vertical-align: middle，所以看起来正常。
vertical-align: middle 在 Firefox 中为何不生效
当 .checkbox__label 是 inline 元素（默认），且内部混用文字、inline-block 或空格时，Firefox 会按完整行盒（line box）重新计算基线位置，vertical-align: middle 实际对齐的是该行盒的中点，而非父容器中点。常见触发条件：
-
label内有换行符或多余空格（HTML 中的文本节点） -
label字体设置了line-height但未归一化 - 父容器用了
flex或grid，但未显式约束交叉轴对齐方式 - 伪元素
::before没设display: inline-block，仍按inline参与基线对齐
稳定对齐的实操方案（非 hack）
绕过基线陷阱，直接控制定位和尺寸关系：
- 给
.checkbox__label::before加display: inline-block; vertical-align: top;（避免基线依赖） - 用
transform: translateY(-50%)配合top: 50%做垂直居中（需父label设position: relative） - 更推荐：把整个
.checkbox改为display: flex; align-items: center;，伪元素作为子项，用margin-right控制间距 - 若必须保留 inline 布局，强制统一行高：
.checkbox__label { line-height: 1; font-size: 16px; }，并确保无空白文本节点
容易被忽略的可访问性连带问题
对齐修复后，别漏掉焦点与禁用态映射——Firefox 下键盘用户 Tab 到 input 时，焦点框必须准确套在自定义方框上，否则会被视为“不可操作”：
立即学习“前端免费学习笔记（深入）”；
-
.checkbox__input:focus + .checkbox__label::before必须加box-shadow（不能只靠 outline） -
.checkbox__input:disabled + .checkbox__label::before要同步降 opacity 并设cursor: not-allowed - 禁用时，
label的pointer-events: none不能加在 label 上，否则屏幕阅读器无法读取关联文本
真正难的不是画个方框，而是让每个像素都响应焦点、缩放、高对比度模式和键盘操作——Firefox 的渲染逻辑只是把这些问题暴露得更早、更准。
