根本原因是浏览器对input和button的默认盒模型计算逻辑不同：button在chrome/safari中按quirks模式将border和padding计入height，而input按标准模式将其额外增加，导致相同height值下实际高度不等。
为什么 input 和 button 设置相同 height 却不等高
根本原因不是你写错了，而是浏览器对这两类表单控件的默认盒模型计算逻辑不同：在多数浏览器（尤其是 Chrome、Safari）中，button 默认使用类似 Quirks 模式的高度计算——它的 border 和部分 padding 被算进 height 内部；而 input[type="text"] 默认走标准模式，border 和 padding 是额外加在 height 外的。
结果就是：你写 height: 40px，input 实际占用高度可能是 40px + 2px（上下 border）+ 4px（上下 padding），而 button 就真只占 40px。视觉上必然一高一低。
- 这不是 bug，是浏览器长期兼容策略导致的渲染差异
- Firefox 和 Edge 表现略有不同，但核心矛盾一致
- 仅靠重设
font-size或line-height无法根治——它们影响的是内容垂直居中，不是容器高度本身
box-sizing: border-box 必须全局加，且要覆盖所有状态
加了 box-sizing: border-box 才能让 height 的语义真正统一：所有 padding 和 border 都被包含在设定值内。但很多人只加在普通状态，漏掉了伪类或禁用态。
- 必须同时作用于
input、button、input[type="submit"]、input[type="reset"] - 别只写
input, button { box-sizing: border-box; }——要加上input::-webkit-search-cancel-button等 WebKit 特殊伪元素（否则 Safari 中搜索框右侧 × 按钮会撑高） - 如果用了 CSS reset（如
* { box-sizing: border-box; }），确认它没被后续样式覆盖（检查 DevTools 的 Computed 面板里box-sizing是否为border-box）
为什么 vertical-align 单独加没用
因为 vertical-align 只对行内级元素生效，且依赖父容器的行高和基线。当 input 和 button 是块级布局（比如 flex 或 float 后脱离文档流），vertical-align 直接失效。
- 在
display: flex容器里，用align-items: stretch（默认值）拉齐高度，而不是靠vertical-align - 在
float布局里，必须先确保父容器没塌陷（加::after清除浮动），否则vertical-align: middle没参考系 - 如果两者是纯行内排列（没 float、没 flex），才需要同时设
vertical-align: middle，且父容器要有明确line-height
实际项目中最容易忽略的三个点
很多团队花半天调样式，最后发现败在细节：
-
button的默认outline在聚焦时会额外增加 1–2px，导致临时错位——加outline: none或用outline-offset控制 -
input在某些输入法（如 macOS 中文输入法）下会自动加padding，需用input::-webkit-input-placeholder等选择器针对性重置 - 移动端 Safari 对
button的最小高度有硬性限制（约 44px），即使设height: 36px也会被拉高——此时要用-webkit-appearance: none并手动重置所有样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
