最可靠方案是用 min-height + padding + box-sizing: border-box；因 height 和 line-height 单独设置会引发 textarea 无视、select 在 Safari 失效、padding+border 溢出及缩放错位等问题，而 min-height 结合相对单位可适配字体缩放并统一各浏览器渲染高度。
直接设 height 是最常见也最不可靠的做法——它会触发浏览器对不同表单控件的差异化渲染，导致 textarea 忽略、select 在 Safari 失效、input-group 按钮错位，且缩放时高度漂移。
浏览器对表单控件的默认渲染逻辑根本不同
Chrome、Firefox、Safari 和旧版 Edge 对 input、select、textarea 的 box-sizing、padding、line-height 和 border 解析策略不一致。比如 IE11 把 border 算进高度，Chrome 更倾向按 content-box 解析；Firefox 对 line-height 的继承行为也有细微差异。这些叠加起来，.form-control 实际渲染高度可能差 2–4px，尤其在嵌套 input-group 或配合自定义 label 时，视觉错位非常明显。
为什么 line-height 和 height 单独覆盖无效
单纯给 .form-control 设 height: 36px 或 line-height: 36px 会引发新问题：
-
textarea不响应line-height，设了也没用 -
select在 Safari 和旧版 Edge 中忽略height，只按内容撑开 - 强制
height后，padding+border可能溢出，触发滚动条或裁剪文字 - 响应式断点下（如
sm尺寸），固定像素值会破坏字体缩放一致性
真正起作用的是 min-height + padding + box-sizing: border-box
放弃控制“绝对高度”，转而约束“最小可用空间”：
立即学习“前端免费学习笔记（深入）”；
- 确认
.form-control已有box-sizing: border-box（Bootstrap 5 默认已设，旧版或自定义构建需手动补） - 用
min-height: calc(1.5em + 0.75rem + 2px)：其中1.5em是行高基准，0.75rem是上下padding，2px是上下border宽度 - 保持
padding: 0.375rem 0.75rem不变，避免内边距浮动导致高度波动 - 所有尺寸单位统一用
rem或em，别用px——这样才能适配字体缩放，让各浏览器渲染出几乎一致的视觉高度
input-group 内部按钮/附件高度不同步的根源
input-group 默认是 display: flex 容器，但关键点常被忽略：
- Bootstrap 5.3+ 默认启用了
align-items: stretch，但 v4 需手动加d-flex align-items-stretch -
.input-group-text或.btn若含图标字体（如 Font Awesome），其line-height或font-size与.form-control不匹配，就会视觉错位 -
form-control-sm/form-control-lg只作用于input/select/textarea，**不会自动同步到input-group-text或button**，必须手动给兄弟元素也加btn-sm或btn-lg - 给
input单独加height或padding，会破坏 flex 的自然拉伸逻辑
最容易被忽略的是：实际高度最终取决于 font-size 变化是否被 min-height 中的 em 值准确捕获——漏掉这点，lg/sm 尺寸类就会出现高度错层。
