应统一表单控件尺寸与交互样式：使用box-sizing: border-box，重置padding/border/margin；select和textarea需单独处理min-height与line-height；用clamp()或rem实现响应式高度；禁用outline改用box-shadow确保焦点态一致；真机测试覆盖各平台渲染差异。
input、select、textarea 默认尺寸差异大
浏览器对不同表单控件的默认 height、padding、border 和 box-sizing 处理不一致，比如 input[type="text"] 在 Chrome 中默认有 2px 边框和 1px 内边距，而 select 通常更高、内边距更大，textarea 还带滚动条占位。直接设统一 height 会导致内容被裁切或垂直居中偏移。
- 统一使用
box-sizing: border-box，避免尺寸计算歧义 - 显式重置
padding、border、margin，不要依赖浏览器默认值 - 对
select和textarea单独处理min-height和line-height，避免文字贴顶 - 移动端需注意
font-size影响控件实际高度（iOS Safari 会放大小于16px的输入框）
用 rem 或 clamp() 实现响应式控件高度
固定像素值（如 height: 40px）在小屏上容易撑出横向滚动条，或在大屏上显得过小。用相对单位才能真正响应。
- 推荐用
clamp(36px, 4vh, 48px)：小屏取最小值，中屏随视口缩放，大屏封顶 - 或基于根字号：设
html { font-size: clamp(14px, 2.5vw, 18px); }，再用height: 2.5rem - 避免对
textarea直接设height，改用min-height+resize: vertical - 所有控件加
vertical-align: middle，解决行内排列时基线不对齐问题
聚焦态与用户交互反馈不一致
统一尺寸后，如果只改外形不处理状态样式，:focus 下的轮廓（outline）、阴影（box-shadow）仍可能错位或遮挡内容，尤其在 iOS 上 outline 偏移常见。
- 禁用原生
outline：outline: none，改用box-shadow: 0 0 0 2px #007bff - 确保焦点样式有足够的对比度，且不改变控件布局（
box-shadow不触发重排） - 为
select添加appearance: none后，必须手动加下拉箭头背景图，否则 iOS 无提示 - 测试真机：Android Chrome 的
input聚焦会自动放大，需加viewport的user-scalable=no（慎用）或限制最小字号
媒体查询中遗漏控件类型或断点
只在 @media (max-width: 768px) 里调尺寸，但忘了 input[type="date"]、input[type="range"] 在小屏上有特殊渲染逻辑；或者断点没覆盖折叠屏（如 1024px 宽但 576px 高）。
