为什么CSS input高度与button高度不一致

根本原因是浏览器对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。视觉上必然一高一低。

1. 这不是 bug，是浏览器长期兼容策略导致的渲染差异
2. Firefox 和 Edge 表现略有不同，但核心矛盾一致
3. 仅靠重设 font-size 或 line-height 无法根治——它们影响的是内容垂直居中，不是容器高度本身

box-sizing: border-box 必须全局加，且要覆盖所有状态

加了 box-sizing: border-box 才能让 height 的语义真正统一：所有 padding 和 border 都被包含在设定值内。但很多人只加在普通状态，漏掉了伪类或禁用态。

1. 必须同时作用于 input、button、input[type="submit"]、input[type="reset"]
2. 别只写 input, button { box-sizing: border-box; } ——要加上 input::-webkit-search-cancel-button 等 WebKit 特殊伪元素（否则 Safari 中搜索框右侧 × 按钮会撑高）
3. 如果用了 CSS reset（如 * { box-sizing: border-box; }），确认它没被后续样式覆盖（检查 DevTools 的 Computed 面板里 box-sizing 是否为 border-box）

为什么 vertical-align 单独加没用

因为 vertical-align 只对行内级元素生效，且依赖父容器的行高和基线。当 input 和 button 是块级布局（比如 flex 或 float 后脱离文档流），vertical-align 直接失效。

1. 在 display: flex 容器里，用 align-items: stretch（默认值）拉齐高度，而不是靠 vertical-align
2. 在 float 布局里，必须先确保父容器没塌陷（加 ::after 清除浮动），否则 vertical-align: middle 没参考系
3. 如果两者是纯行内排列（没 float、没 flex），才需要同时设 vertical-align: middle，且父容器要有明确 line-height

实际项目中最容易忽略的三个点

很多团队花半天调样式，最后发现败在细节：

1. button 的默认 outline 在聚焦时会额外增加 1–2px，导致临时错位——加 outline: none 或用 outline-offset 控制
2. input 在某些输入法（如 macOS 中文输入法）下会自动加 padding，需用 input::-webkit-input-placeholder 等选择器针对性重置
3. 移动端 Safari 对 button 的最小高度有硬性限制（约 44px），即使设 height: 36px 也会被拉高——此时要用 -webkit-appearance: none 并手动重置所有样式