label和checkbox默认不对齐源于baseline错位，input[type="checkbox"]基线在底部附近而label在文字底边；统一设vertical-align:middle或用flex+align-items:center包裹组合可彻底解决。
label 和 checkbox 默认不对齐，是因为 baseline 错位
浏览器默认把 按基线（baseline）对齐，而它的 baseline 实际落在控件底部附近； 的 baseline 却在文字底边。两者天然错开，看起来像“label 悬在 checkbox 上方”。加 margin-top 或 padding-bottom 是治标——推的是视觉位置，不是对齐逻辑。
真正要做的，是让它们共享同一套对齐坐标系：
- 统一设
vertical-align: middle，但必须同时作用于label和input，只设一个没用 - 确保父容器没有干扰的
line-height（可显式设为line-height: normal） - 避免
label是纯文本、input是替换元素却混用不同display值
用 flex 包裹每组 label+input 最稳
这是目前最可控、兼容性好、且不依赖浏览器默认行为的做法。重点不是“让 label 居中”，而是让整个组合在垂直方向上居中。
结构示例：
<div class="form-checkbox"> <input type="checkbox" id="agree"><label for="agree">我已阅读并同意条款</label> </div>
CSS 关键点：
.form-checkbox { display: flex; align-items: center; gap: 0.5em; }-
input[type="checkbox"] { flex: none; }（防止某些旧版 Safari 拉伸） -
label { margin: 0; }（清除浏览器默认label的上下 margin）
iOS Safari 下点击区域偏小，label 必须显式处理
原生 checkbox 在 iOS 上点击热区极窄，仅限框体本身。用户点 label 文字却没反应，不是 JS 绑定问题，是渲染层限制。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
修复方式很具体：
- 给
label加cursor: pointer，提示可点击 - 设
min-height: 1.2em，确保热区高度覆盖文字行高 - 别依赖
for属性就以为万事大吉——iOS 有时会忽略未显式撑高的label - 如果用了
transform: scale(1.2)放大 checkbox，记得同步调大label的min-height，否则热区和视觉不匹配
多个 checkbox 并排时，label 文字换行会导致底部错位
当 label 文字较长、容器宽度受限时，label 自动折行，但 flex 容器仍按整个 label 盒子的 top 边对齐，结果就是 checkbox 全部对齐顶部，文字底部参差不齐。
解决思路不是限制换行，而是让文字“沉到底部”：
- 给
label加display: flex; flex-direction: column; justify-content: flex-end; - 或更轻量：加
margin-top: auto;（需父级是 flex 容器且设了flex-direction: column） - 避免用
vertical-align: bottom——它只对 inline/inline-block 有效，且受行高影响极大
真正容易被忽略的，是 checkbox 的 box-sizing 和 border。某些重置样式库会全局设 input { box-sizing: border-box; }，但 checkbox 在部分 Android WebView 中会因此缩放异常。如遇对齐突然偏移，先检查是否无意中改变了它的盒模型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
