直接用 reset.css 会搞崩表单，因其粗暴清零表单元素的 border、padding、font，而各浏览器原生渲染差异大；Normalize.css 则收敛而非清零，保留可用默认行为，仅修正明显不一致处。
为什么直接用 reset.css 会把表单搞崩
因为多数老式 reset.css（比如 Eric Meyer 版）粗暴地把 input、select、textarea 的 border、padding、font 全设为 0 或 inherit，而不同浏览器对表单控件的默认渲染逻辑差异极大——Chrome 用系统原生控件，Firefox 有自己一套伪元素，Safari 在 macOS 上还带阴影和圆角。一重置，date 输入框变细条，checkbox 消失，select 下拉箭头错位，全乱。
Normalize.css 对表单做了什么妥协
它没“清零”，而是做收敛：保留各浏览器可读、可用的默认行为，只修正明显不一致的地方。比如统一 input[type="search"] 的 appearance，修复 Safari 中 textarea 的 resize 行为，让 button 在 IE 和 Chrome 下都响应 cursor: pointer。但它不碰 input[type="range"] 的轨道样式、不标准化 file 按钮的结构——因为这些本就该由开发者主动控制。
-
normalize.css不重置appearance到none，只在必要时设为revert或auto - 它保留
input的line-height继承，避免文字被截断 - 对
fieldset和legend做了最小化归一，但不隐藏legend（很多 reset 会设display: none）
你真正该手动重置的三个表单节点
Normalize 是基线，不是终点。以下三处必须自己加 CSS，否则移动端点击区域小、高对比度模式下不可读、辅助技术识别失败：
-
input、select、textarea：显式声明min-height（如min-height: 1.5em），防止 Safari 自动压缩高度 -
input[type="checkbox"]和input[type="radio"]：必须用accent-color或自定义伪元素，不能依赖浏览器默认色（尤其深色模式下） -
button：重置border为1px solid currentColor，并确保:focus-visible有清晰轮廓（别用outline: none）
示例：
button { border: 1px solid currentColor; }<br>input, select, textarea { min-height: 1.5em; }
移动端表单重置最容易漏的兼容点
iOS Safari 对 input[type="number"] 和 input[type="date"] 会强制插入上下微调按钮（appearance: spinbutton），Android Chrome 则不会；同时，所有移动端浏览器默认禁用用户缩放（user-scalable=no），导致 font-size: 16px 以下的文字无法被双指放大。这些都不是 Normalize 能覆盖的。
- 用
input::-webkit-inner-spin-button和input::-webkit-calendar-picker-indicator隐藏 iOS 微调/日历图标（仅 WebKit） - 对
input和textarea加font-size: 16px，否则 iOS 可能触发自动缩放 - 别给
select设background-image替换下拉箭头后忘了加padding-right，否则文字顶到边缘
表单样式不是越“干净”越好，而是越“可控”越好。Normalize 提供的是底线共识，真正的重置动作得落在具体输入类型、具体交互状态、具体设备能力上——漏掉任一环，用户就在某个角落卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
