必须显式声明input、textarea、select、button{box-sizing:border-box}，因safari15+和部分android webview绕过继承链，直接按ua样式解析为content-box；还需同步设置padding、border、line-height才能视觉归零。
必须显式给表单控件设 box-sizing: border-box，通配符重置对它们基本无效。
为什么 * { box-sizing: border-box } 对 input、button 等无效
不是你写错了，是 Safari 15+ 和部分 Android WebView（尤其是 4.4 及更早）会绕过继承链，直接按 UA 样式表的默认值解析——input 和 button 在这些环境里默认仍是 content-box。即使父元素设了 border-box，子级表单控件也不会继承。
-
button在 Safari 中被当作系统控件特殊处理，CSS 继承被静默忽略 -
input[type="search"]在 iOS Safari 下始终用content-box，哪怕全局写了*选择器 - 某些旧版 UC 内核或 WebView 会把
border当作不可见占位符，导致box-sizing声明被丢弃
哪些表单控件必须单独声明 box-sizing
别只盯着 input，以下元素在不同浏览器中默认盒模型不一致，且继承不可靠：
-
input（所有类型：text、email、search） -
textarea（安卓 WebView 中常回退到content-box） -
select（Firefox 和旧 Edge 渲染逻辑差异大） -
button（Safari 和 Chrome 默认 padding 计算方式不同，box-sizing不生效就必然错位）
推荐写法：
input, textarea, select, button { box-sizing: border-box; }
搭配 box-sizing 必须同步控制的三个样式
只写 box-sizing 是不够的。表单控件的宽高不准，往往来自三处干扰源：
-
padding：Chrome 默认6px 12px，Firefox 是4px 8px，IE8 是硬编码值 → 统一写死，如padding: 8px 16px -
border：Firefox 默认1px inset，Safari 是1px solid→ 推荐border: 1px solid transparent，既占位又不显色 -
line-height与高度控制：避免height: 36px这种硬设 → 改用min-height: 36px+padding+line-height组合，文字垂直居中更稳
Flex 容器里按钮宽度异常的隐藏原因
当 button 在 Flex 容器中用了 flex: 1 0 0，但没设 box-sizing: border-box，Safari 会触发隐式 min-width: min-content 保护机制，导致按钮撑开容器或换行——Chrome/Firefox 正常，只有 Safari 错。
- 根本原因是 Safari 认为
content-box按钮的“自然宽度”包含默认padding和border，但计算逻辑与其他浏览器不一致 - 修复方式：除了
box-sizing: border-box，还得加min-width: 0关闭 Safari 的保护 - 第三方 UI 库（如 Vant）若没在组件内部显式设
box-sizing，其van-button或van-field也可能意外撑开
容易被忽略的一点：calc() 里写的 width: calc(100% - 20px)，那个 20px 是指外边距或间隙，不是为了抵消 padding/border——border-box 已经管了那部分。算错就又绕回老问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
