表单控件默认 box-sizing 不统一，需同时重置 padding、border 和 font 相关属性才能使 border-box 生效；推荐使用 rem 单位的 padding、显式 border 及系统字体，并设置 vertical-align: middle 解决对齐问题。
为什么表单控件默认box-sizing不统一
浏览器对 input、textarea、select 的默认 box-sizing 值不一致：Chrome/Firefox 给 input[type="text"] 和 textarea 设为 content-box，但部分系统控件（如 select 在旧版 Safari）可能表现得像 border-box；更麻烦的是，某些 UA 样式会额外加 padding 或 border，导致 width 计算结果不可控。
直接写 box-sizing: border-box 不总生效，因为原生控件的 UA 样式优先级高，尤其在未重置其他属性时。
必须连带重置的三个关键属性
只改 box-sizing 是无效的。这些控件的尺寸受三者共同影响：padding、border、font 相关属性。UA 样式常给 input 加 2px padding、1px border，还依赖系统字体度量，导致 height 计算漂移。
- 必须显式声明
padding（哪怕设为0），否则 UA 的 padding 会干扰border-box行为 - 必须声明
border（至少是border: 1px solid transparent），否则某些浏览器在border-box下仍按 content-box 渲染 height - 建议同步设置
font-family和font-size，避免因字体度量差异导致行高/高度不一致
最简且兼容的重置写法
以下规则能覆盖所有主流浏览器（Chrome 80+、Firefox 75+、Safari 14+、Edge 90+），且不会破坏可访问性：
立即学习“前端免费学习笔记（深入）”；
input,
textarea,
select {
box-sizing: border-box;
padding: 0.375rem 0.75rem;
border: 1px solid #d1d5db;
font-family: system-ui, -apple-system, sans-serif;
font-size: 1rem;
line-height: 1.5;
}
注意点：
-
padding值推荐用 rem，避免缩放时失衡；数值来自主流设计系统（如 Tailwind 的px-3 py-2） - 不要用
height固定值——它和padding+border+line-height冲突，易引发垂直居中错位 - 若需禁用默认 focus outline，用
outline: 2px solid transparent替代outline: none，保留键盘可访问性
IE11 及更老浏览器的特殊处理
IE11 对 textarea 的 box-sizing 支持有 bug：即使设了 border-box，其 height 仍按 content-box 解析。唯一可靠解法是放弃固定 height，改用 min-height + resize: vertical。
- 对 IE11 需单独加 hack：
textarea { height: auto; min-height: 2.5rem; } - 不要尝试用
*height或_height，IE11 已不支持条件注释，且这些 hack 在 border-box 下反而加剧错乱 - 如果项目已放弃 IE，这段可完全忽略——现代 CSS 无需 hack
真正容易被忽略的是：表单控件的 vertical-align 默认是 baseline，和旁边文字对不齐。加一句 vertical-align: middle 比调 margin-top 更稳定。
