根本原因是appearance、vertical-align和flex行为在Safari≤13、Firefox≤86、IE11中支持断裂或逻辑不一致：appearance:none部分失效，vertical-align默认baseline导致偏高，IE11忽略align-items需单独设vertical-align:top，伪元素尺寸受font-size继承影响。
旧版浏览器里 checkbox 自定义样式对齐失效，根本原因不是你写错了 CSS，而是 appearance、vertical-align 和 flex 行为在 Safari ≤13、Firefox ≤86、IE11 等环境中支持断裂或逻辑不一致。
appearance: none 在 Safari 12–13 中部分失效
这些版本虽支持 appearance: none，但仅移除了边框和背景，不重置内部盒模型尺寸与基线位置。即使加了 -webkit-appearance: none 和 -moz-appearance: none，控件仍会保留原生高度、默认 vertical-align: baseline，导致伪元素画出的方框和文字“看起来偏高”。
- 必须额外设置
input[type="checkbox"] { margin: 0; vertical-align: middle; }强制覆盖默认对齐 - 若用
position: absolute隐藏原生控件，要确保父label有position: relative，否则伪元素定位漂移 - Safari 12.1 下
line-height对label::before的垂直居中影响异常，建议统一设line-height: 1或显式用top: 50%; transform: translateY(-50%)
flex 容器中 align-items 失效于 IE11 和旧 Firefox
当 checkbox 组用 display: flex 布局时，align-items: flex-start 在 IE11 中对 input[type="checkbox"] 不起作用——它把 checkbox 当作“替换元素”，忽略 flex 对齐指令，仍按 baseline 渲染。
- IE11 必须给
input单独加vertical-align: top才能顶部对齐 - Firefox ≤86 对
align-items在单行 flex 中支持不稳定，建议同时写align-self: flex-start到 input 元素本身 - 不要依赖
gap控制 checkbox 间距：IE11 不支持，且旧 Safari 中gap可能被忽略，改用margin-inline-end+:last-child清除
label::before 伪元素在低版本中渲染错位
自定义 checkbox 通常靠 label::before 画方框，但旧浏览器对伪元素的 content: "" 尺寸计算不一致，尤其当父 label 字体未显式声明 font-size 或 line-height 时，width/height 会被缩放或截断。
立即学习“前端免费学习笔记（深入）”；
- 必须为
label设置固定font-size（如14px），避免继承系统字体导致比例失真 -
label::before要加box-sizing: border-box，否则旧 Firefox 会把border算进宽高，撑大热区 - Safari 11–12 不支持
label::before的transform动画，勾选动画得降级为opacity或直接省略
真正难缠的点不在“怎么画个方框”，而在于旧浏览器对同一段 HTML/CSS 的解析路径完全不同：有的靠 vertical-align，有的靠 flex，有的只认 position。一套样式想通吃，就得在每个关键节点预埋兼容分支，而不是寄希望于某个属性“应该生效”。
