必须显式声明button { box-sizing: border-box; }，因safari 15+和部分android webview会跳过继承、坚持用ua样式content-box解析；还需同步设置padding、border、line-height等样式才能实现视觉归零。
直接写 * { box-sizing: border-box; } 不够，尤其对 button、input 这类表单控件，Safari 和部分 WebView 会无视它。
为什么通配符 box-sizing 在 button 上经常失效
浏览器 UA 样式（用户代理样式）对表单控件有强干预：Safari 15+ 和某些 Android WebView 会跳过继承链，坚持用 content-box 解析 button 的宽度。哪怕你写了 * { box-sizing: border-box; }，它也大概率不生效。
这不是 bug，是渲染引擎对“系统级控件”的特殊处理逻辑 —— 它们优先走原生样式路径，CSS 继承被有意绕过。
-
button必须单独声明box-sizing: border-box; -
input、textarea、select同样需要显式设置，不能依赖通配符 - 如果用了 Bootstrap 3 或旧版 UI 库，它们没内置这条声明，调试时容易误判“已经生效”
盒模型统一必须同步控制 padding / border / line-height
只改 box-sizing 只解决了“计算方式”，但不同浏览器给 button 的默认 padding、border、line-height 差异巨大 —— Chrome 是 6px 12px，Firefox 可能是 4px 8px，IE8 是硬编码值。视觉上依然不一致。
- 推荐统一写死：
padding: 8px 16px;（或全清零：padding: 0;，但需配border和line-height） -
border建议用1px solid transparent：占位不显色，避免 Firefox 的inset边框干扰布局 - 高度控制别用
height: 36px，改用min-height: 36px+padding+line-height组合，文字垂直居中更稳
Flex 容器里 button 宽度错乱的真正原因
当 button 放在 display: flex 容器中，且设置了 flex: 1 0 0，Safari 会触发隐式 min-width: min-content 保护机制 —— 它按 content-box 算出“自然宽度”，包含默认 padding 和 border，结果按钮突然撑宽甚至换行，Chrome/Firefox 却正常。
- 修复只需两行：
button { box-sizing: border-box; min-width: 0; } -
min-width: 0是关键，它关闭 Safari 的保护行为 - 这个坑只在 Flex 场景暴露，纯块级流里不易察觉
真正难的不是写那句 box-sizing，而是意识到表单控件从来就不听通配符的话；你得一个个点名，再补上 padding/border/line-height/min-width，才算真正归一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
