button和input等表单控件必须显式声明box-sizing: border-box，因safari 15+等浏览器将其视为原生元素而忽略通配符继承；伪元素需单独设置::before,::after{box-sizing:border-box}；还需统一重置padding、border、line-height并实机验证。
button 和 input 必须单独写 box-sizing: border-box
通配符 * { box-sizing: border-box; } 对 button、input、select、textarea 在 Safari 15+ 和部分 Android WebView 中基本无效——这些控件被浏览器当作“系统级原生元素”，会跳过继承链，坚持用 UA 样式中的 content-box 解析尺寸。你看到 DevTools 里 computed 值是 border-box，不等于它真按这个算。显式声明才可靠：
button, input, textarea, select { box-sizing: border-box; }- 别漏掉
input[type="search"]和input[type="number"]，它们在 Safari 中额外渲染清除按钮或增减控件，更依赖显式控制 - 如果用了 Bootstrap 3 或 Ant Design 4.x 这类老库，它们没内置这条规则，调试时容易误判“样式已生效”
::before 和 ::after 伪元素必须显式声明
伪元素不继承父级 box-sizing，默认永远是 content-box。哪怕你写了 * { box-sizing: border-box; }，::before 画的下拉箭头、::after 叠加的遮罩层仍会按“内容宽 + padding + border”计算，结果就是容器视觉正常，实际内部撑开 2–4px，引发换行、滚动条意外出现、定位偏移。
- 必须加这行：
*::before, *::after { box-sizing: border-box; } - 不能只靠
* { box-sizing: border-box; }覆盖——*不匹配伪元素 - 第三方 UI 库（如 Element Plus）通常只作用于自己的 class，不会覆盖你全局写的伪元素规则，所以必须自己补全
padding / border / line-height 必须同步重置
只改 box-sizing 只解决了“计算方式”，但各浏览器给表单控件的默认 padding、border、line-height 差异巨大：Chrome 的 button 是 6px 12px，Firefox 是 4px 8px，IE8 是硬编码值。视觉上依然错位。
-
padding建议统一写死：padding: 8px 16px;（或清零后配border和line-height） -
border推荐1px solid transparent：占位不显色，避免 Firefox 的inset边框干扰布局 - 高度别用
height: 36px，改用min-height: 36px+padding+line-height组合，文字垂直居中更稳 -
input[type="search"]的 × 清除按钮、textarea拉伸后的最后一行截断，都是这些默认值未重置导致的实机问题
旧版 Safari 和 iOS WebView 需要特殊兜底
Safari ≤12 和某些 Android WebView 对 border-box 支持不完整：光标偏移、高度塌陷、边框渲染错位不是 bug，是原生 UI 层未完全适配。这时候强行设 border-box 反而更糟。
- 对
input[type="search"]、input[type="number"]、textarea、select、svg text，可考虑局部回退：input, textarea, select, button { box-sizing: content-box; } - 配合
-webkit-appearance: none;缓解部分渲染异常（注意：它会同时干掉原生 focus 状态和可访问性语义，需手动补:focus-visible） - 验证不能只看 Chrome DevTools，必须在三端实机或模拟器里敲击、拖拽、缩放确认——尤其是 iOS Safari 下的光标定位和 Firefox 下
textarea拉伸后的底部截断
真正难的不是写那几行 CSS，而是意识到表单控件从来就不听通配符的话；你得一个个点名，再补上 padding/border/line-height/min-width: 0（Flex 场景下），才算真正归一。JS 里所有读取 offsetWidth 或 getBoundingClientRect() 的逻辑，也得跟着重新校准——因为值变了，但错误不会报出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
