单选框垂直错位、间距不稳、点击热区小及无障碍丢失问题，根源在于基线对齐、内联盒模型、iOS限制与语义缺失；应统一用嵌套label、设vertical-align:middle、min-height:44px、保留原生input并正确关联label。
label嵌套input后，单选框垂直对齐错位
默认情况下，<label><input type="radio">文字</label> 里的 input 和文字基线不一致，尤其在字体大小变化或用了 line-height 的容器里，容易出现上偏、下掉、左右晃动——不是浏览器 bug，是表单控件默认 vertical-align: baseline 和文本行内盒模型共同作用的结果。
解决核心就一条：强制统一垂直对齐方式。
- 给所有
input[type="radio"]加vertical-align: middle（不是top或text-bottom，后者在不同字号下依然浮动） - 确保父级
label没有意外的display: inline-block+vertical-align冲突（比如设了vertical-align: top又没同步改子元素） - 如果用了 Flex 布局（比如
display: flex; align-items: center），反而要删掉vertical-align，否则两者打架
label用for绑定时，单选组间距忽大忽小
当写成 <input id="a"><label for="a">选项A</label> 这种分离结构，label 默认是 inline 元素，但它的渲染受前后空白符、换行、父容器 font-size 影响极大。同一组里有的换行、有的不换行，视觉间距就“跳”。
嵌套写法（<label><input>文字</label>）能规避这个问题，因为整个 label 是一个内联盒子，内部 input 和文字共用同一行盒，间距由其 margin 控制，更可控。
立即学习“前端免费学习笔记（深入）”；
- 统一用嵌套写法，别混用
for和嵌套 - 给
input[type="radio"]设固定margin-right: 8px（或margin-inline-end），别依赖空格或换行缩进 - 避免在
label内部加<br>或额外<span></span>，会引入不可预期的行高和基线偏移
移动端 Safari 下单选框点击热区太小
原生 input[type="radio"] 在 iOS 上默认点击区域只有 12×12px 左右，手指点不准，用户得反复试。这不是样式问题，是 Safari 对表单控件的硬性限制——它只把控件本身当可点击区，不管外面 label 多大。
必须靠 label 触发，且确保 label 覆盖足够面积。
- 嵌套写法天然满足：点击
label任意位置都等效点击input - 给
label加min-height: 44px（iOS 推荐最小触控尺寸），并用display: block或inline-flex确保高度生效 - 别用
pointer-events: none或opacity: 0隐藏input后又忘了扩大label尺寸——这是最常见漏点
自定义单选框后，无障碍支持丢失
用 appearance: none + 伪元素重绘单选框时，很容易只顾样式，忘了保留语义和键盘交互能力。屏幕阅读器可能读不出选项状态，Tab 键无法聚焦，空格键不能切换。
关键不是“怎么画得像”，而是“怎么让辅助技术认出它是单选框”。
- 保留原生
input[type="radio"]，只用 CSS 隐藏它（position: absolute; opacity: 0; width: 1px; height: 1px;），别删掉或替换成<div> <li>确保 <code>label仍包裹或通过for关联该input，否则aria-checked不会自动同步 - 不要给伪元素加
tabindex="0"——这会让焦点落在装饰上，而非真实控件
对齐这事看着简单，但涉及渲染模型、可访问性、跨端一致性三层逻辑。改完记得在 iOS Safari、Chrome DevTools 的 Accessibility 面板、以及键盘 Tab 导航下各跑一遍——少一个环节，用户就可能卡住。
