视觉对齐需依赖语义结构与css可预测行为，禁用line-height像素值、vertical-align: middle及嵌套label，改用无单位line-height、min-height、ch单位、显式for/id绑定等策略保障多变量下的稳定对齐。
视觉对齐不是靠“看着差不多”，而是靠语义结构 + CSS 可预测行为共同保障。盲目加 margin 或 float 很容易在小屏或不同字体下失效。
label 和 input 垂直对齐总偏移？别碰 line-height
iOS Safari 和部分 Android WebView 里，input[type="text"] 和 label 看似写了 align-items: center 却仍错位，根源是字体度量（ascent/descent）和默认 line-height 渲染不一致。
- 父容器（如
.form-row）绝对不要设line-height，尤其不能设带单位的值（如line-height: 24px） - 改用无单位值：
line-height: 1.2，它会随字体大小缩放，更稳定 - 给
label加min-height: 1.5em，防止 rem 缩放时文字被裁切 - 禁用
vertical-align: middle—— 它在 flex 容器中无效，且在 inline-block 场景下基线漂移严重
固定宽度 label 在小屏撑破容器？用 ch 或 flex 控制
写 label { width: 120px; } 是桌面思维。小屏下它要么强制换行，要么溢出，还破坏可访问性扫描动线。
- 改用
flex: 0 0 auto; min-width: 12ch;——ch单位基于 “0” 字宽，比em更稳，适合文本长度可控的标签（如“姓名”“邮箱”） - 避免用
em设 label 宽度：思源黑体和 Roboto 下 1em 差近 2px，累积起来就错位 - 如果 label 文字长度差异大（如“地址” vs “用户协议确认”），直接放弃等宽，用
text-align: right+flex-grow: 1让 input 自适应剩余空间
嵌套 label 写法（<label>文字<input></label>）为什么会被 axe 报警告？
这不是语法错误，而是自动化检测工具无法 100% 确保嵌套结构在所有辅助技术中语义等价。尤其 SSR 或静态生成场景，DOM 构建顺序、JS 动态插入都可能让屏幕阅读器跳过 input。
- 对外交付或需 WCAG 2.1 AA 合规的项目，必须用显式
for/id绑定 -
for和id值必须完全一致：大小写、连字符、空格都不能差 —— 推荐统一用小写 + 下划线，如id="user_email"配for="user_email" - React 中别硬写字符串，用
htmlFor={id}和动态id保证同步 - 嵌套写法若坚持使用，确保 label 内无按钮、链接等其他交互元素，否则移动端点击 label 可能误触发聚焦 + 意外跳转
fieldset 边框在 iOS 上截断或圆角变形？重置 UA 样式是唯一解
这不是 bug，是浏览器对 fieldset 的 UA 样式没做响应式适配。iOS Safari 默认边框、内边距、min-width 都会干扰布局。
- 必须重置全部 UA 样式：
fieldset { border: none; padding: 0; margin: 0; min-width: 0; } -
legend不要留空，也不要只放图标；隐藏文字必须用clip-path: inset(100%)或position: absolute，但 DOM 结构不能删 - 嵌套多个
fieldset时，务必检查是否漏闭合 —— 后续控件可能被浏览器吞掉，导致表单逻辑断裂
真正难的不是写对某一行 CSS，而是在字体变化、缩放、屏幕尺寸切换、辅助技术介入等多个变量同时作用时，还能保持对齐可预测。多数失效都发生在「看起来没问题」的边界场景里 —— 比如用户把系统字体调大 120%，或者用了非默认中文字体。这时候，ch、min-width、显式 for/id 这些看似琐碎的点，就成了最后一道防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
