必须同时为 input 和 button 设置 box-sizing: border-box 才能对齐高度；因浏览器默认 box-sizing 不同，button 在 quirks 模式下将 padding/border 算入 height，而 input 默认 content-box 会向外撑高，导致视觉错位。
必须同时给 input 和 button 设置 box-sizing: border-box，否则单靠 height 声明永远对不齐。
为什么 height: 40px 在 input 和 button 上效果不同
浏览器对 button 默认使用 Quirks 模式计算高度：它的 border 和 padding 被算进声明的 height 内部；而 input 默认是标准模式下的 content-box，border 和 padding 往外撑。结果就是——同样写 height: 40px，button 的内容区被压缩，视觉上反而“矮一截”。
- Chrome/Safari 中
button看起来比input低 1–2px - 加了
vertical-align: middle仍错位（在flex布局下完全无效） - 改
font-size后高度又漂移（line-height没同步更新）
box-sizing: border-box 必须显式作用于两者
通配符重置（如 * { box-sizing: border-box; }）在 Safari 15+ 和部分 Android WebView 中对 button 失效，它会坚持用 UA 样式解析。必须单独写：
input,
button {
box-sizing: border-box;
}- 不能只写
input或只写button，漏一个就破功 - 不用加
-webkit-/-moz-前缀，Chrome 80+、Firefox 75+、Safari 14+、Edge 90+ 全支持 - 若需兼容 IE8，才补全局重置：
* { box-sizing: border-box; }（IE7 及更早不支持，需降级方案）
别依赖 line-height 控制 input 高度
input[type="text"] 是替换元素，line-height 对它完全无效——设了也不会垂直居中文本，还可能引发基线错位或截断。
立即学习“前端免费学习笔记（深入）”；
- 对
input：只用padding+height+box-sizing: border-box控制整体高度 - 对
button：优先用padding+min-height，例如min-height: 36px; padding: 8px 16px; - 若需文字居中，均分上下
padding更可靠（如padding: 12px 16px;）
Flex 布局下 height 失效？换 align-items
一旦父容器设了 display: flex，子元素的 height 就可能被忽略——因为默认 align-items: stretch 会拉伸子项。硬设 height 反而破坏逻辑。
- 把
input和button放进flex容器时，直接给容器设align-items: center - 删掉子元素的
height，靠padding+box-sizing匹配视觉高度 - 必要时给
input加align-self: center，比依赖父级更可控
真正容易被忽略的是：哪怕你写了 box-sizing: border-box，只要没同步控制 padding、border 和 font-size，高度依然会因浏览器默认值差异而漂移。统一重置这四者才是稳定解法。
