根本原因是表单控件默认 content-box 且各浏览器对 border、padding、font-size、line-height 渲染不一致，尤其 select/button 受系统 UI 影响；仅 box-sizing: border-box 不够，须重置 margin、vertical-align、font-family、font-size、padding、border 等属性，并针对伪元素（如::-webkit-inner-spin-button、appearance）做兼容处理，避免硬设 height，改用 padding+line-height+min-height 控制高度。
为什么 input、select、textarea 在不同浏览器里宽高总对不上
根本原因是表单控件默认使用 content-box，但它们的 border、padding、甚至 font-size 和 line-height 在 Chrome、Firefox、Safari 里渲染逻辑不一致——尤其是 select 和 button，还可能被系统 UI 覆盖部分样式。
更麻烦的是，某些浏览器（如旧版 Safari）对 height 的解析会把内边距和边框算进“可见高度”，而另一些则只按内容区计算，导致设了 height: 40px 后实际占用空间远超预期。
统一用 box-sizing: border-box 真的够吗
不够。光改 box-sizing 只解决尺寸计算逻辑，不解决默认样式差异。必须配合重置关键渲染属性：
-
margin和vertical-align必须显式设为0或middle，否则基线对不齐，同行元素会错位 -
font-family和font-size必须声明，否则继承父级时可能触发系统字体 fallback，影响行高和高度 -
padding建议用数值而非em或rem，避免因父级字号变化导致内边距缩放失真 -
border不能省略，哪怕设成0，否则某些浏览器（如 Firefox）会保留默认1px阴影边框
推荐写法：
input, select, textarea, button {
box-sizing: border-box;
margin: 0;
padding: 8px 12px;
font-family: system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1.5;
border: 1px solid #ccc;
vertical-align: middle;
}
遇到 select 下拉箭头或 number 微调按钮不听控制怎么办
这些是伪元素，不同浏览器暴露的可样式化接口不同：
立即学习“前端免费学习笔记（深入）”；
- Chrome / Edge 支持
::-webkit-inner-spin-button和::-webkit-appearance: none隐藏微调按钮 - Firefox 用
appearance: none（需带前缀-moz-appearance），但无法隐藏下拉箭头，只能靠background覆盖 - Safari 对
select的appearance支持最弱，建议用background+padding-right预留空间，再用background-image绘制自定义箭头
最小兼容写法：
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("data:image/svg+xml;utf8,") no-repeat right 8px center / 10px auto;
padding-right: 32px;
}
要不要给所有表单元素加 height
不建议直接设 height。表单元素高度由 padding + border + line-height + 字体实际度量共同决定，硬设 height 容易在换字体、缩放页面或高 DPI 屏幕下溢出或截断。
更稳妥的做法是：
- 用
min-height保证最小可用尺寸 - 靠
padding和line-height控制视觉高度（例如padding: 8px 12px+line-height: 1.5搭配font-size: 14px，自然得到约 40px 总高度） - 对
textarea单独处理：设min-height和resize: vertical，禁用height避免用户拉伸后内容被裁剪
真正难搞的其实是 checkbox 和 radio ——它们的尺寸几乎无法通过 CSS 精确控制，老老实实用 transform: scale() 调整，再用 margin 补齐对齐间隙。
