根本原因是input默认content-box盒模型导致width+padding超宽；需统一设border-box并覆盖所有表单元素，注意ie兼容性、第三方库覆盖及height与line-height手动对齐。
input加padding后宽度超预期，根本原因是box-sizing默认值
浏览器对 input 元素默认使用 content-box 盒模型：你写 width: 200px; padding: 10px;，实际占宽就是 220px（内容区200 + 左右padding各10）。这不是bug，是规范行为，但常被当成“变形”。
全局设 input { box-sizing: border-box; } 能解决，但要注意两点：
- 必须覆盖所有
input类型（text、email、number等），某些旧版 Safari 对type="search"有特殊处理 - 如果项目已用 CSS reset 或 normalize.css，得确认它没把
box-sizing覆盖回content-box - 第三方 UI 库（如 Element Plus、Ant Design）可能自己重置了
input样式，需检查其 CSS 优先级是否更高
为什么只给input加border-box不够，还得考虑button和select
单纯修复 input 容易漏掉表单兄弟元素。比如 button 和 select 在多数浏览器里也默认 content-box，同样会因 padding 溢出。更麻烦的是：select 的内建下拉箭头在部分 Chrome 版本中会随 padding 错位。
稳妥做法是统一处理常见表单控件：
- 推荐用通配符重置：
* { box-sizing: border-box; }（注意性能影响极小，现代浏览器已优化） - 若担心影响 SVG 或 canvas 等非布局元素，可限定范围：
input, select, textarea, button { box-sizing: border-box; } - 别忘了
textarea—— 它的resize行为在border-box下更可控
IE8–IE11下box-sizing需要前缀，但input本身有兼容性陷阱
box-sizing: border-box 在 IE8+ 原生支持，但需加 -ms- 前缀才保险；真正的问题在 IE 对 input 的渲染逻辑：
- IE9–IE11 中，
type="number"或type="date"的内置 spinner/datepicker 会挤压padding-right，即使box-sizing正确也显示不全 - 解决方案不是去掉 padding，而是用
padding-right: 30px;+background: url(...) no-repeat right 8px center;手动模拟右侧图标空间 - IE8 不支持
box-sizing前缀？别硬扛，直接用width: auto;配合max-width更实际
用CSS自定义属性动态控制padding，避免全局副作用
如果项目里有些 input 必须保持 content-box（比如对接老系统弹窗组件），全局设 border-box 反而添乱。这时更适合用 CSS 自定义属性按需控制：
- 定义基础类：
.input-compact { --input-padding: 4px; }、.input-normal { --input-padding: 8px; } - 在样式中引用：
padding: var(--input-padding); box-sizing: border-box; - 这样既能保证盒模型一致，又不会污染未加 class 的
input，尤其适合微前端或多团队协作场景
最常被忽略的点：height 和 line-height 在 border-box 下仍需手动对齐。比如 height: 36px; padding: 8px; 时，line-height 得设为 20px 才能让文字垂直居中——这个计算没人帮你做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
