必须显式声明button { box-sizing: border-box; }，因safari 15+和部分android webview会忽略通配符继承，坚持用ua样式解析；还需同步设置padding、border、line-height等样式才能实现视觉归零。
直接给 button 显式声明 box-sizing: border-box 是必须的，但只写这一条几乎肯定不够——你还会被默认 padding、border、line-height 和 Safari 的解析异常拖垮。
为什么 button 必须单独写 box-sizing: border-box
通配符 * { box-sizing: border-box; } 在 Safari 15+ 和某些 Android WebView 中对 button 失效；这些环境会“选择性忽略”继承，坚持用 UA 样式里的 content-box 解析内边距。显式写 button { box-sizing: border-box; } 才能真正覆盖。
- Safari（尤其 iOS）会把
button当作系统控件特殊处理，box-sizing不走 CSS 继承链 - 部分旧版 WebView（如 Android 4.4 内置）会把
border当作不可见占位符，额外挤压内容区，box-sizing声明可能被静默丢弃 - Bootstrap 3 等老库没内置该声明，而 Bootstrap 5+ 虽有，但调试时容易误判样式来源，导致你以为它已生效
button 的“视觉归零”需要哪几个关键样式
单靠 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: 36px硬设，改用min-height: 36px+padding: 8px 16px+line-height: 20px，让文字垂直居中更稳
Flex 容器里 button 宽度错乱的隐藏原因
如果 button 在 Flex 容器中用了 flex: 1 0 0，而它的 box-sizing 仍是 content-box，Safari 会触发隐式 min-width: min-content 保护机制，导致按钮撑开容器或换行。
- 错误表现：按钮在 Safari 下突然变宽、溢出父容器，Chrome/Firefox 正常
- 根本原因：Safari 认为
content-box按钮的“自然宽度”包含默认padding和border，但计算逻辑与其他浏览器不一致 - 修复方式：必须显式声明
button { box-sizing: border-box; min-width: 0; }，min-width: 0才能关闭 Safari 的保护
IE8 及更早版本的兜底方案不能只靠 CSS
IE8 支持 box-sizing，但 IE7/6 完全不识别——任何前缀或写法都无效。真要兼容，得放弃“单属性覆盖”思路：
- 必须写
padding: 0+border: 1px solid transparent，否则 IE7/8 会把无色边框当占位符，进一步挤压内容区 - 加
line-height: normal或显式line-height: 1.4，再配height: 28px（两者尽量相等），防止文字偏上 - 加
display: inline-block+zoom: 1触发 hasLayout，这是 IE6–7 下唯一能稳定控制尺寸的方式
真正麻烦的不是写多少行代码，而是不同浏览器对同一段 CSS 的“执行优先级”差异——比如 UA 样式表里的 fieldset padding 就比你的通配符重置更狠，button 同理。别信“全局重置就万事大吉”，每个表单控件都得单独过一遍 computed styles。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
