button宽高“不准”是因为默认box-sizing:content-box，且受浏览器差异的padding、border、font-size、vertical-align:baseline等干扰；真正起效需四点同步：全局box-sizing重置、显式声明表单控件基础样式、统一单位、用padding+line-height+min-height替代height硬设。
button 元素的 width/height 为什么总“不准”
因为 button 默认是 box-sizing: content-box，你设 width: 120px，它只管内容区；加上默认 padding（Chrome 约 6–8px，Firefox 可能不同）和浏览器内置 border（如 Firefox 的 1px inset 阴影），实际宽度轻松突破 130px。这不是 bug，是规范行为——但后果就是按钮在表单里和其他 input、select 对不齐。
为什么只给 button 加 box-sizing: border-box 还不够
光写 button { box-sizing: border-box; } 能解决尺寸计算逻辑，但压不住三类干扰：
- 不同浏览器对
button的默认padding、border、font-size渲染不一致（尤其 Safari 的系统级渲染） -
vertical-align默认是baseline，导致和同行input文字基线错位，视觉上像“飘起来” - 部分旧版浏览器（如 IE8）对
button的line-height和高度解析异常，即使设了height，文字也可能上下居中失败
真正起效的最小配置组合
不是单加一个属性，而是四点同步落地：
- 全局重置盒模型：
*, *::before, *::after { box-sizing: border-box; }（必须带伪元素，否则动态插入的按钮图标可能溢出） - 显式声明表单控件基础样式：
button, input, select, textarea { margin: 0; padding: 8px 16px; border: 1px solid #ccc; font: inherit; vertical-align: middle; } - 避免单位漂移：所有
padding用px，不用em或rem；若必须用相对单位，确保父级font-size一致 - 高度控制优先用
padding + line-height + min-height，而不是硬设height；例如min-height: 36px; padding: 8px 16px; line-height: 20px;比height: 36px更稳
容易被忽略的兼容性坑
IE8 支持 box-sizing，但不支持 inherit 值，所以不能写 html { box-sizing: border-box; } * { box-sizing: inherit; }；必须用通配符直接覆盖。另外，button 在 IE8 下仍可能因 line-height 解析问题导致文字偏上，此时要补一句 line-height: normal; 或显式设 vertical-align: middle;。第三方 UI 库（如 Bootstrap 3）没内置 box-sizing 重置，得自己加；而 Bootstrap 5+ 已内置，重复声明虽无害，但调试时容易误判来源。
立即学习“前端免费学习笔记（深入）”；
