button需显式设box-sizing:border-box，因safari/ios及部分webview解析异常，且ie8以下不支持该属性；还需同步统一padding、border、line-height等样式才能真正“视觉归零”。
直接给 button 显式加 box-sizing: border-box 是必要但不充分的——它能统一尺寸计算逻辑，但压不住默认 padding、border 和 line-height 的跨浏览器差异。
为什么只写 * { box-sizing: border-box; } 还不够
全局重置对 button 无效的常见原因有三个：
- IE8 及更早版本不支持
box-sizing，这条规则被整个忽略，button仍按content-box渲染 - Safari（尤其 iOS）对
button的line-height解析异常，即使box-sizing生效，文字也可能贴顶或截断 - 部分 Android WebView 忽略
box-sizing声明，或把border当作“不可见占位符”额外挤压内容区
button 必须单独声明 box-sizing: border-box
不能依赖通配符继承，必须显式写：
button {
box-sizing: border-box;
}
原因很实际：
-
button在 Safari 15+ 和某些 WebView 中会悄悄按border-box解析内边距，但其他浏览器不这样——不显式声明，你就没法控制行为一致性 - 如果按钮在 Flex 容器中用了
flex: 1 0 0，box-sizing错误会导致min-width失效，触发 Safari 的隐式min-width: min-content保护 - 第三方库（如 Bootstrap 3）没内置该声明，而 Bootstrap 5+ 虽有，但调试时容易误判样式来源
搭配哪些属性才能真正“视觉归零”
单靠 box-sizing 无法解决按钮宽高不准的问题，必须同步控制三类干扰源：
-
padding：Chrome 默认约6px 12px，Firefox 可能是4px 8px，IE8 是硬编码值——统一写死padding: 8px 16px或padding: 0（后者需配合border和line-height） -
border：Firefox 默认1px inset，Safari 是1px solid，IE6–7 会把无色边框当占位符——推荐border: 1px solid transparent，既占位又不显色 -
line-height与height：避免用height: 36px硬设，改用min-height: 36px; padding: 8px 16px; line-height: 20px;，让文字垂直居中更稳
IE6–8 下的兜底方案不能只靠 CSS
这些浏览器根本不识别 box-sizing，任何前缀或写法都无效。真要兼容，得放弃“单属性覆盖”思路：
- 必须写
padding: 0; border: 1px solid transparent;—— 否则 IE7/8 会把无色边框当占位符，进一步挤压内容区 - 加
line-height: normal;或显式line-height: 1.4;，再配height: 28px;（两者尽量相等），防止文字偏上 - 加
display: inline-block; zoom: 1;触发 hasLayout，防边框浮动或塌陷 - 别用
background-image+padding挤图标空间——IE6–7 不支持 SVG，背景定位极易偏移
最易被忽略的一点：即使你用了 Normalize.css 或全局重置，它们对 button 的默认 padding 通常只设到 1px 6px，远不够“视觉归零”。真正的控制权，始终在你为 button 单独写的那几行 CSS 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
