PostCSS + autoprefixer 是最可靠的 CSS 前缀处理方案，需显式配置插件、精确声明 browserslist，并确保所有 CSS 文件纳入构建流程。
PostCSS + autoprefixer 是当前最可靠的做法
手动加 -webkit-、-moz- 这类前缀既容易漏，又难维护。现代项目基本都用 autoprefixer 自动处理，它不靠猜测，而是根据你声明的目标浏览器范围（browserslist）查 Can I Use 数据库，只加真正需要的前缀。
常见错误是只装了 postcss 没配 autoprefixer 插件，或者 browserslist 写成 "> 1%" 却没考虑 IE 兼容需求——结果 IE 11 里 flex 仍没 -ms- 前缀。
- 必须在 PostCSS 配置中显式启用
autoprefixer，光有postcss不行 -
browserslist要写具体，比如["IE >= 11", "Chrome >= 45"]，避免模糊表达 - 若用 Webpack，确认
postcss-loader的postcssOptions.plugins包含autoprefixer()
Vue / React 项目里 CSS 前缀失效的典型原因
不是工具没起作用，而是样式没经过 PostCSS 流程。Vue 单文件组件里的 <style> 默认走 vue-style-loader + css-loader，但缺 postcss-loader 就不会跑 autoprefixer。
React 用 CRA 的话，默认已集成 autoprefixer，但如果你 eject 了或用了 Vite，就得自己检查是否漏掉了 PostCSS 配置。
立即学习“前端免费学习笔记（深入）”；
- Vue CLI 项目：确保
vue.config.js中未禁用css.requireModuleExtension: false导致 PostCSS 被跳过 - Vite 项目：确认
vite.config.js的css.postcss字段存在且返回含autoprefixer()的配置 - 全局 CSS（如
main.css）和<style scoped>都要走同一套 PostCSS 链路，不能只信某一种
autoprefixer 不加 -ms-flexbox 的几种情况
autoprefixer 对 IE 10/11 的 flex 支持很谨慎——它只在明确需要时才加 -ms- 前缀，比如你写了 display: flex，但它发现目标浏览器里该属性需前缀才生效，才会输出 display: -ms-flexbox。
但如果你写了 display: -webkit-flex 这种手动前缀，autoprefixer 反而会把它删掉：它只负责“补”，不负责“修旧”。更隐蔽的问题是，某些 Autoprefixer 版本（如 v9+）默认关闭了 flexbox: 'no-2009'，导致老式 display: -ms-flexbox 不再生成。
- 检查
autoprefixer版本，v10+ 默认只加标准语法，如需 IE 兼容，必须显式设flexbox: '2009' - 不要混用手动前缀和自动前缀，否则可能被覆盖或删除
- 运行
npx autoprefixer --info可查看当前配置下哪些特性会被加前缀
纯 CSS 文件没加前缀？先看它有没有进构建流程
很多人把 reset.css 或 common.css 直接扔进 public/ 目录，用 <link> 引入——这类文件完全绕过构建工具，autoprefixer 根本碰不到它。
还有人用 @import 在 SCSS 里引入外部 CSS，如果那个文件路径没被 PostCSS loader 匹配到（比如不在 src/ 下），同样不会处理。
- 所有需要前缀的 CSS，必须放在构建流程能识别的路径下（通常是
src/或styles/） - 避免用
public/存放需处理的样式，那是给纯静态资源用的 - Webpack 中检查
css-loader和postcss-loader的include或test是否覆盖了你的文件路径
