必须显式重置所有表单控件的box-sizing，否则因UA样式用!important强制content-box，导致width/height失效；推荐input,select,textarea,button{box-sizing:border-box;}以更高权重覆盖、避免影响SVG、便于单独调整。
必须显式重置所有表单控件的 box-sizing，否则它们在不同浏览器中默认行为不一致，width/height 几乎必然失效。
为什么表单控件的 box-sizing 不能靠全局 * 覆盖
虽然 *, *::before, *::after { box-sizing: border-box; } 是安全写法，但部分浏览器（尤其是旧版 Safari 和某些 Android WebView）对 <input>、<select></select> 等元素的 UA 样式会用 !important 强制 box-sizing: content-box。这意味着即使你写了全局规则，这些控件仍可能按默认模型解析尺寸。
常见错误现象：
-
input { width: 100%; padding: 8px; }在 Chrome 中撑出横向滚动条 -
button和input[type="text"]并排时高度差 1–2px，且无法通过vertical-align拉齐 -
textarea设了height: 100px，实际却显示为 116px（含默认 padding + border）
推荐的表单控件 box-sizing 重置写法
直接针对表单元素单独声明，覆盖 UA 样式优先级：
立即学习“前端免费学习笔记（深入）”；
input,
select,
textarea,
button {
box-sizing: border-box;
}
这个写法比通配符更可靠，原因如下：
- 选择器权重更高，能压过大多数 UA 样式中的
!important - 避免影响 SVG 元素、
<canvas></canvas>容器等不支持或不应受border-box影响的元素 - 便于后续单独调整：比如需要让
<textarea></textarea>支持弹性拉伸，可加resize: vertical;而不影响其他控件
box-sizing: border-box 后还必须配哪些属性
只设 box-sizing 不够，表单控件的尺寸还受以下因素干扰：
-
margin和border：不同浏览器默认值不同，建议统一重置margin: 0; border: 1px solid #ccc; -
line-height和font-size：影响文字垂直居中，推荐用padding控制视觉高度，而非依赖line-height -
appearance：Chrome/Safari 对select和button的原生样式渲染差异大，加appearance: none;再手动控制更可控 -
min-height：移动端缩放可能导致height失效，加min-height: 36px;做兜底
典型组合示例：
input,
select,
textarea,
button {
box-sizing: border-box;
margin: 0;
padding: 8px 12px;
border: 1px solid #ccc;
font-size: 14px;
min-height: 36px;
}
容易被忽略的兼容性细节
IE8 需要 -ms-box-sizing 前缀，但仅当项目仍需支持它时才加；现代项目可省略。真正容易踩坑的是：
-
<select></select>在 Chrome 中箭头图标占位逻辑特殊，即使box-sizing: border-box生效，padding-right仍需额外 +12px 预留空间 -
<button></button>默认有outline，不移除会导致点击时多出一圈虚线，影响视觉高度判断 - 第三方 UI 库（如 Element Plus）可能重置了
box-sizing，需检查其 CSS 是否用!important锁死，必要时用更具体的选择器覆盖
最常漏掉的一点：伪元素 ::before/::after 若用于装饰表单控件（比如自定义 radio 的勾选图标），也得确保它们继承 box-sizing: border-box，否则尺寸又回到 content-box 模式。
