Flex布局下输入框和按钮高度不一致的根源在于默认box-sizing、padding、border、line-height及字体渲染差异；需统一box-sizing: border-box，显式设height，button清空上下padding，input加vertical-align: middle。
Flex布局下输入框和按钮高度不一致怎么办
直接原因是 input 和 button 的默认 box-sizing、padding、border、line-height 和字体渲染差异，导致即使设了相同 height，视觉上也错位。Flex 的 align-items: stretch（默认值）会拉伸子项，但对表单控件效果不可靠。
- 统一用
box-sizing: border-box，避免 padding/border 溢出高度计算 - 显式设置
height或min-height，别只依赖line-height - 禁用
button的默认上下 padding：padding: 0 12px（左右留白，上下清零） - 给
input加vertical-align: middle，缓解 baseline 对齐抖动
为什么 align-items: center 还是没对齐
因为 center 是按容器的交叉轴中点对齐，而 input 和 button 的基线（baseline）位置不同——input 的 baseline 在文字底部，button 默认在内容盒底部附近，两者参考线不一致，视觉上仍像一高一低。
- 加
align-items: baseline比center更靠谱，但需确保父容器有明确行高或字体设置 - 更稳的做法是：给两者都加
vertical-align: middle，再配合align-items: center - 若用
font-size不同，必须同步调整line-height，否则 baseline 会漂移
Chrome/Firefox 中按钮文字下沉一像素怎么修
这是典型字体度量差异：Firefox 渲染 button 时会多算一个像素的 descender 空间，而 Chrome 更激进地压缩。不是 bug，是浏览器对表单控件 UA 样式的实现分歧。
- 强制重置
button的line-height: normal或具体数值（如line-height: 1.2） - 加
transform: translateY(-1px)仅针对 Firefox（用@supports (-moz-appearance: none)包裹） - 最省心：改用
display: flex把按钮内部文字居中，而不是依赖原生按钮排版
用 Flex 实现响应式搜索栏时的兼容陷阱
老版本 Safari（Safari ≤ 12）对 flex: 1 在表单控件上的支持不稳定，input 可能不收缩，或按钮被挤出容器。
- 避免对
input单独设flex: 1，改用flex: 1 1 0（即flex-basis: 0） - 给父容器加
min-width: 0，防止 flex item 最小宽度撑开 - IE11 完全不认
flex: 1，得 fallback 到width: calc(100% - 80px)（按钮宽预估）
Flex 对齐表单控件从来不是“设个 display: flex 就完事”，真正卡点都在默认样式和浏览器实现细节里。baseline 对齐只是表象，背后是 box model、字体度量、UA 样式三层叠加的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
