CSS前缀补全需精准加、少加，重点支持旧版Safari/Firefox/IE10–11的transform/transition/animation、flexbox等属性；推荐Autoprefixer按目标浏览器自动注入，静态页可用prefixfree.min.js运行时补全，并配合DOCTYPE、box-sizing和normalize.css保障基础兼容。
处理CSS前缀补全，核心是让现代CSS3特性在旧版浏览器中也能正常渲染。关键不在于“加所有前缀”，而在于“加对、加准、加得少”。
CSS厂商前缀要加哪些
不是所有属性都需要前缀，也不是所有浏览器都要照顾。当前（2026年）仍需关注的主要是：
- transform / transition / animation：Safari 15.6 及更早、Firefox 68 之前版本仍依赖前缀
-
flexbox 属性：IE10–11 需
-ms-前缀（如-ms-flex-direction），且语法略有差异 -
border-radius / box-shadow / background-clip：基本已无需手动加前缀，但若项目需支持 Safari 5.1 或 Chrome 25 以下，仍需保留
-webkit- -
@keyframes：旧版 Safari 和 Android Browser 必须写
@-webkit-keyframes并在animation中对应调用
优先用 Autoprefixer 自动处理
手动加前缀易漏、难维护，推荐用 Autoprefixer（基于 PostCSS）按需注入。它只加真正需要的前缀，不输出已淘汰的（比如 IE8/9 的 -ms-）。
- 配置目标浏览器范围，例如：
['>1%', 'last 2 versions', 'iOS >= 12', 'Android >= 6'] - 确保标准属性写在带前缀属性之后（Autoprefixer 会自动排序）
- 配合 webpack、Vite 或 CLI 工具，在构建阶段处理 CSS，开发时写纯标准语法即可
静态页面没构建流程？用轻量兼容层
如果只是纯 HTML + CSS 的静态页（比如邮件模板、落地页、CMS 内嵌页），可引入两个小文件：
立即学习“前端免费学习笔记（深入）”；
- normalize.css：统一默认样式，解决 margin/padding/字体/表单等基础差异
-
prefixfree.min.js：运行时自动补前缀，放在
</body>前，体积仅 2KB，不侵入构建流程
注意：prefixfree 是客户端补全，适合快速上线或临时修复，不替代构建时处理。
别忽略基础兼容保障
前缀只是兼容性的一环，还需同步做这几件事：
- 声明
<!DOCTYPE html>，强制浏览器使用标准模式，避免 IE 怪异模式 - 统一盒模型：
* { box-sizing: border-box; }，消除 padding/border 对宽高的干扰 - 重置默认样式：用 normalize.css 替代简单粗暴的
* { margin: 0; padding: 0; } - 对 flex/grid 布局做降级：比如给 IE11 加
display: -ms-flexbox;并配-ms-属性
