应显式为 input、textarea、select、button 设置 box-sizing: border-box，因其在旧版 safari 和部分 webview 中不继承该属性，仅依赖 * { box-sizing: border-box } 会导致错位、光标偏移等问题。
直接给 input、textarea、select、button 显式设 box-sizing: border-box，比依赖通配符更稳——因为这些元素在旧版 Safari 和部分 Android WebView 中不继承 box-sizing，漏掉就会错位。
为什么不能只靠 * { box-sizing: border-box }
通配符对真实 DOM 元素生效，但表单控件（尤其 <select></select> 和 <input type="file">）在 Safari ≤12 或某些 WebView 里，box-sizing 行为不稳定：光标偏移、内边距塌陷、高度计算错误。这不是 CSS 写错了，而是原生 UI 层没完全实现该属性。伪元素同理，::before 和 ::after 默认仍是 content-box，必须单独写 *::before, *::after 才覆盖。
-
* { box-sizing: border-box }在 IE6–7 下完全无效，这些浏览器压根不识别该属性 - Normalize.css 或 Ant Design 等库通常不重写表单控件的
box-sizing，它们默认留白 - 若 JS 用
offsetWidth做尺寸判断（比如弹窗定位、拖拽缩放），切换后值会变小——因为现在它返回的是含 padding + border 的总宽
input、textarea、select 必须单独声明 box-sizing
推荐在 CSS 开头就近写这一段，不依赖继承：
input,
textarea,
select,
button {
box-sizing: border-box;
}
这样能绕过通配符在旧环境中的兼容性断层。同时搭配以下几项，才能真正统一外观：
- 显式设置
height和line-height（尤其input），避免因行高不一致导致垂直不对齐 - 用
padding控制内部空白，别靠height硬撑——后者在不同浏览器中渲染精度差异大 - 去掉默认
outline，改用box-shadow或border实现 focus 状态，既可控又无障碍友好 -
textarea加resize: vertical或none，禁用用户随意拉伸导致布局崩坏
表单控件的 margin 和 padding 也得重置
仅设 box-sizing 不够。浏览器 UA 样式会给 textarea 加 vertical-align: top，给 select 加 margin，导致和同行 input 对不齐。所以要一并清理：
input,
textarea,
select,
button {
margin: 0;
padding: 0.5rem 0.75rem;
border: 1px solid #ccc;
font-family: system-ui, -apple-system, sans-serif;
font-size: 1rem;
line-height: 1.5;
}
注意两点：
-
padding值必须和box-sizing: border-box配合才有意义——否则在content-box下，width: 100%会溢出容器 - 不要用
all: unset清空表单样式，它对margin、border这类非继承属性无效，UA 默认值照常保留
真正容易被忽略的，是 select 在 Safari 中的 appearance 行为：即使设了 box-sizing 和 padding，下拉箭头仍可能挤压文字。这时候得加 -webkit-appearance: none 并手动补箭头，否则尺寸再准也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
