必须显式声明 button { box-sizing: border-box; }，因 Safari、iOS WebView 和旧 IE 不继承或不支持通配符重置，且 UA 默认 padding/border/line-height 差异巨大，仅 box-sizing 不足以保证跨浏览器一致性。
直接给 button 显式声明 box-sizing: border-box 是必须的，但只写这一条，按钮在 Safari、iOS WebView 和旧 IE 里依然会宽高不准、文字偏移、边框撑开。
为什么 * { box-sizing: border-box } 对 button 无效
通配符重置在现代浏览器里确实生效，但它对 button 的实际控制力很弱，原因有三：
- Safari（尤其 iOS）和部分 Android WebView 会忽略
button上继承来的box-sizing，必须显式写button { box-sizing: border-box; } - IE8 及更早版本压根不识别
box-sizing，哪怕写了也当没写，button仍按content-box渲染 - 即使
box-sizing生效，button的默认padding、border、line-height在各浏览器 UA 样式中差异巨大——Chrome 默认padding: 6px 12px，Firefox 是4px 8px，IE6–7 是硬编码值，这些根本不受box-sizing管控
button 必须单独声明 box-sizing: border-box
这不是可选项，是跨浏览器一致性的前提。别指望它从 html 或 * 继承过来：
- 写死
button { box-sizing: border-box; }，不能省略选择器，也不能靠input[type="button"]替代——两者 UA 样式不同 - 如果用 Flex 布局且设了
flex: 1 0 0，box-sizing错误会导致min-width失效，Safari 会悄悄触发min-content保护，按钮被意外撑宽 - Bootstrap 3 没内置该声明；Bootstrap 5+ 虽有，但调试时容易误判样式来源——建议统一加在项目基础 CSS 开头，不依赖框架
光有 box-sizing 远不够：还得同步控制三类干扰源
box-sizing 只管尺寸计算逻辑，不管渲染结果。真正让按钮“视觉归零”，得同时约束：
-
padding：Chrome/Firefox/IE 默认值不同，推荐写死，如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 下必须补line-height: normal;或显式line-height: 1.4;，否则文字贴顶
IE6–8 的兜底方案不是加前缀，而是放弃 box-sizing
这些浏览器根本不支持 box-sizing，任何前缀或变体都无效。真要兼容，就得换思路：
- 写死
padding: 0;+border: 1px solid transparent;—— 否则 IE7/8 会把无色边框当占位符，进一步挤压内容区 - 显式设
height和line-height，且两值尽量相等（如都设为28px），防止文字偏上 - 加
display: inline-block;+zoom: 1;触发 hasLayout，避免边框浮动或塌陷 - 别用
background-image配合padding挤图标空间——IE6–7 不支持 SVG，背景定位极易偏移
最常被忽略的一点：button 的盒模型问题本质是 UA 样式硬编码行为，不是普通 CSS 层面的“可覆盖样式”。你越依赖浏览器默认逻辑（比如只设 padding、不碰 line-height 和 border），在旧浏览器里就越容易失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
