box-sizing: border-box 和 line-height 是解决 input 与 button 高度不一致最稳定方案；需统一设置并加浏览器前缀，同时重置 outline、border，button 需 type="submit" 并处理移动端 touch-action 与缩放。
直接给 input 和 button 同时设 box-sizing: border-box + line-height，是目前最稳定、兼容性最好、无需 JS 干预的解法。其他靠 vertical-align 或浮动拼凑的方式，在现代布局中已不可靠。
为什么 box-sizing: border-box 是必须的
浏览器对 input 和 button 的默认 box-sizing 不一致：Chrome/Safari 中 button 默认是 border-box，而 input[type="text"] 默认是 content-box。这意味着同样写 height: 40px; padding: 8px; border: 1px solid，input 实际占用高度是 40 + 2×8 + 2×1 = 58px，button 却刚好是 40px —— 差值就出来了。
- 必须显式统一设为
box-sizing: border-box，否则任何后续调整都是在“修偏移”，不是治本 - 别只写
box-sizing: border-box，要带上前缀（尤其旧版 Safari）：-webkit-box-sizing: border-box、-moz-box-sizing: border-box - 记得同时作用于
input、button、select、textarea—— 它们默认行为各不相同
line-height 比 height 更可靠
用 height 强制固定高，容易和字体渲染、行内替换元素（比如图标）冲突；而 line-height 控制的是行框（line box）高度，天然适配文字垂直居中，且能随 font-size 自动缩放。
- 推荐用无单位值，如
line-height: 1.5，而不是line-height: 24px - 确保
font-size一致（比如都设font-size: 16px），否则line-height: 1.5在不同字号下实际像素值会变 - 如果按钮里有图标或 SVG，需额外加
vertical-align: middle对齐基线，但仅限该场景，不是通用解法
移动端点击区域放大不能只靠 padding
在 iOS/Android 上直接增大 button 的 padding 或 font-size，会导致它比 input 高出几像素，align-items: stretch 反而把它往下压，视觉错位更明显。
- 正确做法是用
transform: scale(1.2)放大按钮视觉尺寸，但不改变其文档流尺寸 - 配合
transform-origin: center right，让缩放锚点落在右侧，避免遮挡input右侧边框 - 必须加
touch-action: manipulation，否则 iOS 仍会有 300ms 点击延迟 - 别忘了
button加type="submit"，否则回车提交失效（2026 年仍有大量项目漏掉这点）
容易被忽略的细节：button 默认 outline 和 border
button 的默认 outline（聚焦时的虚线框）和 border（常为 2px）会叠加在你设置的样式上，尤其在 Safari 中，可能多出 1–2px 高度或左右错位。
- 统一清除：
outline: none或至少outline: 0 - 显式重置
border，例如border: 1px solid #ccc，并注意input和button的border-left是否需要合并（常见搜索框场景） - 若使用
appearance: none，需同步处理各浏览器前缀（-webkit-appearance,-moz-appearance），否则某些安卓 WebView 仍保留原生样式
真正麻烦的从来不是「怎么写」，而是「哪些地方必须同步改」——只要漏掉 button 的 box-sizing，或忘记重置它的 outline，哪怕其他都对，高度差依然会出现。这类问题往往在 Chrome 看着正常，一到 Safari 或旧版 Edge 就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
