button 的 box-sizing 默认为 content-box，但尺寸差异主因是 UA 样式对 padding、border、line-height、appearance 等的差异化声明；显式声明 button { box-sizing: border-box; } 才能覆盖系统控件限制，且需重置 padding、border、appearance 并避免硬设 height。
button 元素的 box-sizing 默认值在所有主流浏览器中都是 content-box，但它的实际尺寸表现差异，根本不是因为 box-sizing 值不同，而是因为 UA 样式（user agent stylesheet）对 padding、border、line-height、appearance 等属性的默认声明各不相同。
为什么 box-sizing: border-box 显式写在 button 上才真正生效？
通配符 * { box-sizing: border-box; } 在 Safari 15+、iOS WebView 和部分 Android 4.4 内置 WebView 中对 button 失效——这些环境把 button 当作系统控件，绕过 CSS 继承链，坚持用 UA 里定义的 content-box 解析。只有显式写 button { box-sizing: border-box; } 才能覆盖。
另外，IE8 虽支持 box-sizing，但不支持 inherit 值；而 IE7/6 完全不识别该属性，任何前缀都无效。
- 必须单独声明：
button, input, select, textarea { box-sizing: border-box; } - 伪元素也要覆盖：
button::before, button::after { box-sizing: border-box; }，否则动态插入的图标或装饰可能溢出 - 第三方组件（如旧版 Bootstrap）可能用
!important覆盖你的规则，需针对性加!important或提高选择器权重
padding 和 border 的 UA 差异比 box-sizing 更致命
Chrome/Edge 默认 padding: 6px 12px、border: 2px solid；Firefox 是 padding: 4px 8px、border: 1px inset；Safari 还带阴影和圆角；IE8 则硬编码了不可覆盖的内边距逻辑。只改 box-sizing 不清这些，width: 100px 依然会渲染成 116px+。
- 推荐统一重置：
padding: 8px 16px（比0更可控，避免文字贴边） -
border不要用none：IE6–7 会把无边框当“隐形占位”，改用border: 1px solid transparent - 必须加
appearance: none，否则 Safari/Chrome 仍按原生逻辑预留内边距和圆角
为什么设了 height: 40px 按钮还是“不准”？
button 是替换元素（replaced element），其内部行盒默认按 vertical-align: baseline 对齐，会为 descender（如字母 g、y 的下延部分）预留空间；加上 UA 的 line-height 不一致，导致即使 box-sizing 和 padding 都归零，高度仍浮动。
- 别硬设
height：它在 IE8、Safari 中解析异常，文字常偏上或裁切 - 推荐组合：
min-height: 40px+padding: 8px 16px+line-height: 24px（确保内容区高度 = 40px − 16px） - 更稳方案是
display: flex; align-items: center; justify-content: center;，彻底脱离 line-height 依赖
真正容易被忽略的，不是“要不要加 box-sizing”，而是它是否在所有上下文里都生效：Shadow DOM 里的按钮、iframe 中嵌入的表单、动态 innerHTML 插入的节点——这些地方的样式往往隔离于主样式表，需要单独确认或用 !important 强制覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
