Flex布局下input和button高度不一致时，应统一box-sizing: border-box、显式设置line-height、移除button默认border/outline，并用flex:1让input占满剩余空间、align-items: stretch自动拉齐高度。
Flex布局下input和button高度不一致怎么办
默认情况下，input 和 button 的行高、边框、内边距在不同浏览器中差异明显，尤其在 Chrome 和 Safari 中，button 常比 input 高 1–2px。这不是 bug，而是浏览器对表单控件的默认样式重置策略不同。
- 统一设置
box-sizing: border-box，避免内边距影响尺寸计算 - 显式声明
height或line-height（推荐后者，更适配文字垂直居中） - 移除
button默认的border和outline，否则可能叠加出额外像素 - 不要用
vertical-align: middle拼凑对齐——它依赖基线，不可靠
.search-box {
display: flex;
}
.search-box input,
.search-box button {
box-sizing: border-box;
line-height: 1.5; /* 与 font-size 配合，比如 16px 字号时 height ≈ 24px */
padding: 8px 12px;
border: 1px solid #ccc;
}
.search-box button {
border-left: none; /* 和 input 共享边框时去掉重复线 */
}
为什么用flex而不是float或inline-block
float 已淘汰，inline-block 会因换行符或空格产生不可控间隙，且无法真正“撑满”父容器宽度。Flex 是目前唯一能自然解决「输入框占满剩余空间 + 按钮固定宽 + 高度严格一致」三要素的方案。
-
flex: 1给input，它会自动吸收剩余空间，无需计算减法 -
button默认不伸缩，宽度由内容或显式width决定 - 父容器设
align-items: stretch（Flex 默认值），子项高度自动拉齐
注意：不要给 input 设 width: 100% —— 它会和 button 争抢整行，导致溢出或换行。
移动端点击区域太小，如何安全放大按钮但不破坏布局
直接放大 button 的 font-size 或 padding 会导致它比 input 高，Flex 的 align-items: stretch 会把它往下压，出现错位。
- 用
transform: scale(1.2)放大按钮视觉尺寸，但不改变文档流尺寸 - 同时加
transform-origin: center right，让缩放锚点靠右，避免遮挡 input 右侧边框 - 必须配合
touch-action: manipulation，防止 iOS 上 300ms 延迟
.search-box button {
transform: scale(1.2);
transform-origin: center right;
touch-action: manipulation;
}
别忘了在按钮上加 type="submit"，否则表单回车提交会失效。
IE11兼容性里最常漏掉的三个点
IE11 对 Flex 支持有限，尤其在表单控件上容易“失联”，不是不显示，而是高度塌陷或不响应 flex 属性。
- 父容器必须有明确的
display: -ms-flexbox和display: flex双写 -
input和button需加-ms-flex: 1（不能只写flex: 1） - IE11 不识别
line-height在button上的垂直居中效果，得补padding-top/padding-bottom手动调
如果项目必须支持 IE11，建议把 button 换成 div + role="button" + JS 绑定点击，反而更可控。
实际写的时候，最容易被忽略的是 box-sizing 没全局重置，或者以为 flex: 1 能自动适配所有字体大小——它只管空间分配，不管内容渲染细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
