如何解决Bootstrap自定义表单控件在不同浏览器下的高度差

根本原因是各浏览器对表单控件的box-sizing、padding、line-height和border渲染策略不同；推荐用min-height+padding+box-sizing:border-box统一控制，避免固定height。

如何解决bootstrap自定义表单控件在不同浏览器下的高度差_统一css行高样式

为什么 `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;
}

说明：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

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 组合，才是跨浏览器下最稳的锚点。