normalize.css 对移动端 ui 失效，因其只校准默认态样式，不处理 :active、:focus、长按高亮及表单控件的 ua 原生渲染逻辑，需手动覆盖 -webkit-appearance、-webkit-tap-highlight-color 等。
移动端不同浏览器的默认UI外观不一致，不能只靠 normalize.css 解决——它根本不处理 :active、:focus、长按高亮、表单控件渲染逻辑这些 UA 层面的差异。
为什么 normalize.css 对移动端 UI 失效
normalize.css 只校准“默认态”：比如 textarea 是否可缩放、button 的字体继承、h1 的 margin 值。但它完全不碰用户代理（UA）样式表里带伪类的规则，也不干预 WebKit 内核对 input[type="number"] 或 select 的原生渲染逻辑。
常见错误现象包括：
-
button在 Safari 点击时出现蓝色外框，Chrome 却没有 - Android Chrome 长按链接/按钮触发半透明灰色蒙层，遮盖自定义背景色
- iOS Safari 中
input[type="search"]自动加圆角和清空按钮，无法用纯 CSS 覆盖 -
select在 iOS 和 Android WebView 中下拉箭头位置、颜色、点击区域大小全都不一样
必须手动覆盖的移动端 UA 样式关键词
这些不是“可选优化”，而是影响交互真实感的基础补丁。缺一不可：
-
button, input, select, textarea必须统一-webkit-appearance: none，否则内核强制渲染原生控件，CSS 修饰无效 -
*:active要设outline: none，否则 Safari 点击瞬间闪蓝框 -
*:focus若需保留焦点提示，得用box-shadow替代 outline，并确保颜色对比度达标 -
body加-webkit-tap-highlight-color: transparent，禁用 Android/iOS 点击高亮 -
input[type="search"]需额外清除::-webkit-search-cancel-button和::-webkit-search-decoration
遇到 select / input[type="date"] 等原生控件怎么办
这些元素在各端渲染逻辑差异极大，normalize.css 完全不介入，也无标准 CSS 属性能跨端统一外观：
- iOS
select下拉是全屏 modal，Android 是 popup，Webview 甚至可能直接调起系统选择器 -
input[type="date"]在 Safari 显示为带齿轮图标的文本框，在 Chrome 显示为带日历图标的按钮，在某些 Android Webview 中根本无响应 - 解决方案不是“强行覆盖”，而是：用
appearance: none+ 自定义 wrapper 包裹，再通过 JS 绑定原生事件触发；或直接引入轻量级日期/选择组件（如 flatpickr），避开 UA 渲染链
CDN 引入 normalize.css 后仍不一致？检查加载顺序和覆盖点
normalize.css 必须放在所有自定义 CSS 之前，否则像 html 的 line-height、button 的 font-family 这些基础校准会被后续规则覆盖，导致 FOUC 或部分失效。
容易被忽略的细节：
- 如果用了 PostCSS 或构建工具，确认
@import语句没被抽离到末尾 - 某些框架（如 Vue CLI）会把 CSS 拆成多 chunk，需确保
normalize.css所在 chunk 加载优先级最高 - 不要混用
reset.css和normalize.css，后者依赖保留的合理默认值（如p的 margin），前者会把它干掉
真正跨端一致的 UI，从来不是靠一个库“自动搞定”的。关键路径就两条：用 normalize.css 把盒模型、文字基线、可缩放行为这些底层差异收口；再用明确的 UA 特定规则（-webkit-appearance、-webkit-tap-highlight-color）把移动端交互层打穿。漏掉后者，等于在沙上筑塔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
