根本原因是各浏览器对表单控件的box-sizing、padding、line-height和border渲染策略不同；推荐用min-height+padding+box-sizing:border-box统一控制，避免固定height。
为什么 form-control 在 Chrome/Firefox/IE 中高度不一致
根本原因不是 Bootstrap 本身，而是各浏览器对 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
Bootstrap 4+ 默认已设 box-sizing: border-box，但如果你用的是 Bootstrap 3 或自定义构建版本，必须显式补全。核心是放弃控制“绝对高度”，转而约束“最小可用空间”：
.form-control {
min-height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
box-sizing: border-box;
}
说明：
立即学习“前端免费学习笔记（深入）”；
-
1.5em对应默认font-size下的文字行高基准，比固定像素更适配缩放和字体变更 -
0.75rem是上下 padding（Bootstrap 默认值），确保内边距一致 -
2px是默认border宽度（1px× 2 边），避免 border 撑高 - 所有尺寸单位统一用
rem或em，避开像素硬编码
针对 input-group 内部按钮/附件的高度同步
当 .input-group 包含 .btn 或 .input-group-text 时，它们的默认高度常与 .form-control 不匹配。不要单独调 .btn 高度，而是让整个组成为弹性容器：
.input-group {
display: flex;
align-items: stretch;
}
.input-group > .form-control,
.input-group > .input-group-text,
.input-group > .btn {
height: auto;
min-height: calc(1.5em + 0.75rem + 2px);
}
注意：align-items: stretch 是关键，它强制所有直接子元素拉伸至容器高度；同时移除子元素自身的 height 声明，改用 min-height 防止内容过少时塌陷。
真正麻烦的从来不是写几行 CSS，而是忘记 textarea 和 select 的渲染特殊性——它们不买 line-height 的账，也不认 height 的绝对指令。用 min-height + em/rem + border-box 组合，才是跨浏览器下最稳的锚点。
