直接用标准CSS属性+normalize.css+autoprefixer+显式单位可覆盖95%跨浏览器渲染差异，因normalize.css统一UA样式差异、autoprefixer补全前缀、显式单位规避calc和颜色解析歧义，但无法解决aspect-ratio等新特性兼容问题。
直接用标准 CSS 属性 + normalize.css + autoprefixer + 显式单位，能覆盖 95% 的跨浏览器渲染差异问题。别再手写前缀、别信“只测 Chrome 就够了”。
为什么同一段 CSS 在 Firefox/Safari/Chrome 里长得不一样
不是你的代码错了，是浏览器自带的 user agent stylesheet 对 h1、button、input 等元素的默认 margin、padding、line-height、font-size 定义不同。比如 Safari 给 h1 设的是 margin-block-start: 0.67em，Firefox 可能是 0.83em；Safari 渲染 button 带圆角，Chrome 默认直角。这些差异在单个元素上不明显，嵌套一深、flex 一排、响应式一缩，立马错位。
内核差异也真实存在：Blink（Chrome/Edge）、Gecko（Firefox）、WebKit（Safari）对新特性的实现节奏和细节处理不一致，比如 aspect-ratio 在 Safari 15.4–16.3 中与 grid 套用会撑满视口，calc() 在 Firefox 里对单位缺失零容忍，Chrome 却可能悄悄补全。
必须作为第一个样式表引入 normalize.css
normalize.css 不是清零，是“收敛”——保留 audio 播放控件、sub/sup 垂直偏移等有用语义行为，只统一有歧义的部分，比如表格边框、表单字体继承、button 默认样式。它比 * { margin: 0; padding: 0; } 安全得多，后者会破坏可访问性基础。
立即学习“前端免费学习笔记（深入）”；
- 必须放在所有自定义 CSS 文件之前，否则被覆盖就白引了
- 不能解决
gap、focus-visible、aspect-ratio等新特性兼容问题，这些得靠其他手段 - 搭配
* { box-sizing: border-box; }一起用，避免盒模型混乱
calc() 和颜色值必须显式、保守
calc(100% - 20) 在 Firefox 直接失效，Chrome 可能自动补 px 或静默忽略——这种“宽容”反而埋雷。颜色同理：#FF6B6B 在 Chrome v110+ 和 Firefox 渲染偏色，不是 bug，是色彩管理策略不同：Chrome 启用严格 sRGB，Firefox 沿用传统基准，Safari 还受系统 P3 色域干扰。
-
calc()内部所有数值必须带单位：calc(100% - 20px)，禁用calc(1em + 1px)这类混合不可运算单位 - 颜色一律用
#RRGGBB或rgb(r, g, b)，禁用hsl()、lab()、color(display-p3)、color-mix()等 Level 4/5 函数 - 加
<meta name="color-scheme" content="light dark">防 iOS Safari 强制深色滤镜导致色偏
字体和自定义字体模糊问题不是“调参”能解决的
字体显示不一致，核心是 font-family 声明链没写对，不是渲染引擎“有问题”。自定义字体模糊，90% 是 font-display 没设或设错，不是字体文件质量差。
-
font-family必须按“自定义字体 → Web 安全字体 → 通用字体族”顺序写，多词名加引号："Microsoft YaHei", "PingFang SC", sans-serif - 自定义字体优先用
font-display: swap（首屏立即显示）或optional（iOS Safari 更稳），别用auto（行为不可控） - 删掉所有触发 GPU 合成层的属性：
transform: translateZ(0)、opacity: 0.99、filter: brightness(1)，它们会让文字变位图、边缘发虚
最常被忽略的一点：viewport 设置错误或系统缩放非整数倍（比如 Windows 设了 110%），会直接让 subpixel rendering 失效——这跟 CSS 本身无关，但效果就是字糊。检查 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 是否完整，系统缩放是否为 100%/125%/150%。
