统一表单元素样式需设 box-sizing: border-box 并重置 margin、padding、font-size 等；select 和 textarea 需微调 height 或用 appearance: none、resize 控制；推荐结合 flex 布局对齐。
表单元素（如 input、select、textarea、button）在不同浏览器中默认尺寸不一致，根本原因在于它们的默认 box-sizing 值不同，且部分元素（如 select）还受系统渲染影响。统一盒模型是解决该问题最直接有效的方式。
强制所有表单元素使用 border-box
默认情况下，多数表单元素使用 content-box，导致设置相同 width/height 时，实际占用空间因 padding/border 而不同。统一设为 border-box 后，width/height 包含 padding 和 border，行为更可控。
- 推荐写法：对所有表单控件批量重置
select,
textarea,
button {
box-sizing: border-box;
}
也可用通配符简化（但注意避免过度影响非表单元素）：
input, select, textarea, button {box-sizing: border-box;
}
重置默认边距与内边距
各浏览器对表单元素的 margin、padding、line-height、font-size 等有不同默认值，尤其 select 和 textarea 差异明显。
立即学习“前端免费学习笔记（深入）”；
- 建议统一设置基础样式（可集成到 CSS Reset 或基础表单类中）
select,
textarea,
button {
margin: 0;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
vertical-align: middle;
}
注意：vertical-align: middle 可修复 input 与文字或按钮基线对齐异常的问题。
处理特殊元素的固有高度差异
即使设置了 box-sizing: border-box 和统一 padding，select 在 Chrome/Firefox 中仍可能比 input 略高，textarea 默认有上下滚动条占位空间。这是由用户代理样式（UA stylesheet）和操作系统控件渲染决定的。
- 对
select可微调height或用appearance: none配合自定义箭头 - 对
textarea，添加resize: vertical或resize: none控制缩放行为，并确保height显式声明 - 必要时用
height: 36px替代min-height，避免 Firefox 下textarea默认高度干扰
配合现代布局进一步对齐
仅靠 box-sizing 不足以完全消除视觉错位。建议结合 Flex 布局让表单控件自动对齐：
.form-row {display: flex;
align-items: center;
gap: 8px;
}
.form-row input,
.form-row select,
.form-row button {
flex: 1;
min-width: 0;
}
这样即使个别元素存在像素级偏差，也能在容器内自然拉伸并视觉对齐。
