必须同时为input和button设置box-sizing: border-box，否则仅设height: 40px必然错位；因button默认按quirks模式将border/padding计入height，而input默认content-box会额外撑高，导致视觉上button“矮一截”。
box-sizing: border-box 必须同时作用于 input 和 button
不加这个，光写 height: 40px 就注定对不齐。因为 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没同步更新）
实操建议：
- 必须同时写在
input、button选择器里，不能只加一边 - 不用写
-webkit-/-moz-前缀，Chrome 80+、Firefox 75+、Safari 14+、Edge 90+ 全支持 - 若项目要兼容 IE8，才需补全局重置：
* { box-sizing: border-box; }
line-height 对 input 无效，但对 button 也不该依赖
input 是替换元素（replaced element），其内部行高由浏览器内建渲染逻辑控制，line-height 对它完全不生效。你设了 line-height: 40px，文本照样上下偏移、甚至被截断——这不是 bug，是规范行为。
而 button 虽然能响应 line-height，但它本身不是靠它控制高度的主因；一旦混用 height + line-height，反而容易在字号变化或不同字体下失稳。
实操建议：
- 对
input：禁用line-height，只用height+padding控制整体高度，并确保box-sizing: border-box - 对
button：优先用padding+min-height替代硬设height，例如：min-height: 36px; padding: 8px 16px; - 若需文字垂直居中，均分
padding-top和padding-bottom更可靠（如height: 40px; padding: 12px 16px;）
flex 布局下 height 失效？别硬扛，换 align-items
一旦父容器设了 display: flex，子元素的 height 就可能被忽略——因为默认 align-items: stretch 会试图拉满父容器高度。如果父容器没设高度，或子元素自己加了 height，反而破坏拉伸逻辑，导致高度忽高忽低。
实操建议：
- 把
input和button放进display: flex容器时，直接给容器设align-items: center，再删掉子元素的height - 用
padding+line-height（仅对button）撑开高度，input靠padding+box-sizing匹配 - 避免在 flex 子项上同时写
height和align-items: stretch，这是冲突源头
为什么全局重置 * { box-sizing: border-box } 还不够
通配符重置能解决大部分问题，但表单控件还有三类干扰逃不开：浏览器对 button 的默认 padding（Chrome 约 6–8px，Firefox 可能不同）、内置 border（如 Firefox 的 1px inset 阴影）、以及 vertical-align: baseline 导致的基线错位。
实操建议：
- 必须显式声明基础样式：
button, input, select, textarea { margin: 0; padding: 8px 16px; border: 1px solid #ccc; font: inherit; vertical-align: middle; } - 所有
padding用px，不用em或rem；若必须用相对单位，确保父级font-size一致 - IE8 下
line-height解析异常，要补一句line-height: normal;或显式设vertical-align: middle;
真正起效的从来不是单点修复，而是四点同步落地：全局 box-sizing 重置 + 表单控件基础样式 + 单位统一 + 高度控制策略切换。漏掉任意一环，都可能在某个浏览器、某次字号调整后突然破功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
