用Normalize.css是目前最轻量、语义保留最完整、维护成本最低的跨浏览器样式统一方案；它校准浏览器默认差异而非清空样式，需优先引入且不可与reset.css混用，确保button、input等元素在各浏览器中渲染一致。
用 Normalize.css 抹平默认样式差异
不同浏览器对 margin、padding、font-size、line-height 甚至 button 或 input 的默认渲染都不一样，直接写样式前不处理，等于在流沙上盖楼。
别手写 * { margin: 0; padding: 0; } —— 性能差、破坏语义、漏掉很多细节（比如 fieldset 的边框、audio 的默认控件、ol 的计数器重置）。
- 用
npm install normalize.css安装，或通过 CDN 引入最新版（当前 v8.0.1） - 确保它在所有自定义 CSS 之前加载，顺序不能错
- 它不会清空一切，而是保留有用默认（如
pre的 whitespace、blockquote的缩进），只校准不一致部分 - 特别注意它对表单元素的处理：统一了
input[type="search"]的取消按钮、修复了 IE 下textarea的垂直对齐
Autoprefixer 必须介入构建流程
手写 -webkit-、-moz- 前缀不仅容易漏，还会在新版浏览器中引发冲突。例如 Safari 16.4+ 会忽略同时存在 -webkit-transition 和 transition 的声明，优先取前者——而前者可能已过时。
Autoprefixer 不是“锦上添花”，是现代 CSS 工程的基础设施。
立即学习“前端免费学习笔记（深入）”；
- 安装：
npm install --save-dev postcss autoprefixer - 配置
browserslist（例如："last 2 versions", "not dead", "> 0.5%"），让它知道目标环境 - 在 PostCSS 配置中启用：
autoprefixer，不要手动加前缀 - 它会把
display: flex编译成display: -webkit-box; display: -ms-flexbox; display: flex，但仅限真正需要的浏览器版本
color(srgb) 和 rgba(0,0,0,0.001) 是 Safari 兼容关键点
Chrome 和 Safari 对颜色和透明度的底层解析逻辑不同，不是“样式没生效”，而是语义被跳过或重解释。
常见误判场景：
-
color: #FF6B6B在 Safari 看起来偏粉——因为未声明色彩空间时，Safari 默认映射到 Display P3；解决：加 fallback：color: #FF6B6B; color: color(srgb 1 0.4196 0.4196); -
border: 1px solid transparent在 Safari 中边框热区丢失、backdrop-filter不触发——transparent被当作“不绘制”而非“全透明”；解决：换用rgba(0, 0, 0, 0.001) - 检测是否支持：
@supports (color: color(srgb 0 0 0))，别用display-p3，后者会让 sRGB 屏过饱和
避免依赖 CSS3 新特性做布局兜底
Flexbox 和 Grid 虽然现在主流支持良好，但降级方案仍需明确。尤其当父容器用了 gap 或 place-items，老浏览器（如 iOS Safari 14.5 以下）会完全忽略整条规则，而不是部分回退。
- 不用
gap替代margin：老浏览器直接失效，子元素挤在一起；改用margin+:not(:first-child)模拟 - Grid 布局必须配
@supports (display: grid)包裹，否则 IE11 及更早版本会跳过整个区块 - 慎用
aspect-ratio：Safari 15 前必须写-webkit-aspect-ratio，且 Autoprefixer 不自动补（需显式配置overrideBrowserslist） - 伪元素
::placeholder在 Firefox 下需::-moz-placeholder，且两者不能共存于同一选择器，要拆开写
真正卡住项目的，往往不是某一条属性不兼容，而是 color(srgb) + backdrop-filter + border 这三者叠加时，Safari 同时解析失败。每个点单独测都 OK，合在一起就崩——这种组合效应最容易被忽略。
