直接用 reset.css 让表单更难看，因其粗暴清空按钮边框背景、select下拉箭头、number微调按钮及textarea缩放手柄等可用性设计；应避免全局引入，优先保留关键表单元素的appearance和基础尺寸，并选用适配现代浏览器的normalize.css v8+。
为什么直接用 reset.css 反而让表单更难看
因为传统 reset.css（比如 Eric Meyer 版）粗暴清空所有默认样式：按钮变无边框无背景、select 失去原生下拉箭头、input[type="number"] 的微调按钮消失、甚至 textarea 的可拖拽缩放手柄也被干掉。这些不是“冗余”，是浏览器为可访问性和可用性做的合理设计。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别全局引入
reset.css，尤其在管理后台或表单密集型项目中 - 如果真要用，至少保留
button、input、select、textarea的appearance和基础尺寸重置 - 注意
normalize.css对user-select、cursor等交互属性的保守处理，它不会禁用它们
normalize.css 在 Safari 15+ 和 Chrome 110+ 中哪些地方悄悄变了
新版浏览器对 details/summary、dialog、:focus-visible 的实现更规范，normalize.css v8.0.2 起已移除对这些元素的手动模拟样式。但老项目若还用 v7.x，会和原生行为冲突——比如 summary 点击后不展开，或 dialog 显示异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查
node_modules/normalize.css/package.json版本，v8+ 才适配现代浏览器 - 若用 PostCSS 或构建工具，确认未被自动降级（如某些 legacy 插件会强制注入旧版）
- 对
dialog元素，必须手动加display: none初始态，normalize不再代劳
自己写轻量重置时，这 4 个 CSS 属性不能省
真正影响跨浏览器一致性的不是 margin/padding，而是底层渲染逻辑相关的属性。漏掉任意一个，都可能在 Firefox 或 Edge 中出现文字截断、焦点丢失、或滚动条错位。
必须显式声明：
-
box-sizing: border-box—— 否则 IE8-、旧 Android WebView 中width: 100%+padding会溢出 -
-webkit-text-size-adjust: 100%—— iOS Safari 缩放正文时，input内文字会意外放大 -
-webkit-tap-highlight-color: transparent—— iOS 点击延迟反馈色块无法被outline覆盖 -
scrollbar-gutter: stable—— Chrome 96+ / Firefox 97+ 中防止滚动条出现时内容跳动
当项目同时要支持 IE11 和 Chrome Canary，重置策略怎么选
IE11 不支持 appearance、scrollbar-gutter、:focus-visible，但 normalize.css v8 已放弃 IE11 支持。硬塞进去会导致 CSS 解析失败，整段样式表被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用条件注释或构建时分包：
ie11-reset.css（含*zoom:1、display:inline-block修复） +modern-reset.css（v8+normalize） - 避免在重置层写 Flex/Grid 布局相关重置——IE11 的
display: flex行为和现代浏览器差异太大，应交由组件层兼容 - 对
font-family，不要写"Segoe UI", "Helvetica Neue"这种长列表，IE11 解析到非法字符会整个失效，改用安全子集
真正的难点不在代码行数，而在判断哪些“默认”是浏览器真正在意的、哪些只是你看着不爽的视觉偏差。重置不是归零，是协商。
