autoprefixer 必须被 postcss-loader 显式调用且位置正确（在 css-loader 后、less/sass-loader 前），需配置 browserslist 精确包含 IE 11 或 ios_saf >=11.3，并明确降级 gap、grid、var() 等无前缀方案的特性。
autoprefixer 必须在构建链中正确激活
旧版浏览器样式失效，往往不是没写前缀，而是 autoprefixer 根本没跑起来。它不会自动生效，必须被 postcss-loader 显式调用，且位置紧接在 CSS 编译之后（如 less-loader 或 sass-loader 之后）。
常见错误是把 postcss-loader 放在 less-loader 前面，或者漏掉 postcssOptions.plugins 配置。Webpack 中正确的 loader 顺序应为：style-loader → css-loader → postcss-loader → less-loader。
- 检查
postcss.config.js是否存在，且导出对象含plugins: ['autoprefixer'] - 若用 Vite / Next.js / CRA，它们可能自带 PostCSS 配置，会静默覆盖你的配置 —— 推荐直接在插件里写死目标：
autoprefixer: { overrideBrowserslist: ['IE 11', 'ios_saf >= 11.3'] } - 运行
npx browserslist，输出必须包含ie 11或ios_saf 11.3（小写），否则 autoprefixer 不会处理这些浏览器
browserslist 配置必须精确匹配实际支持范围
“last 2 versions” 或 “> 1%” 这类模糊配置默认排除 IE11 和旧 iOS Safari，因为它们已被 browserslist 标记为 dead。想让 IE11 生效，就得显式写进去。
最稳妥的做法是在项目根目录新建 .browserslistrc，内容严格按需列出：
立即学习“前端免费学习笔记（深入）”；
IE 11 Android >= 4.4 iOS >= 9 ios_saf >= 11.3
不建议混用 package.json 中的 browserslist 字段和 .browserslistrc，优先级易混淆；选一个并确保 npx browserslist 输出与预期一致。
gap / grid / place-items 等特性不能靠前缀解决
autoprefixer 只补语法前缀（比如 flex → -ms-flexbox），但对 gap、display: grid、place-items 这类 IE/旧 Safari 完全不识别的特性，加前缀毫无意义，甚至引发渲染异常。
-
gap：改用space-x/space-y（Tailwind）或手写margin；PostCSS 插件如flex-gap-polyfill可在构建时自动转成 margin -
display: grid：IE10–11 只认display: -ms-grid，且需配套-ms-grid-columns等专用属性，无法由 autoprefixer 生成 -
place-items：必须拆成justify-content+align-items，两者在 IE11 中均有对应前缀支持
var()、aspect-ratio 等语法级特性必须提前降级
CSS 自定义属性 var(--x) 全系 IE 不支持，aspect-ratio 在 IE 和 Safari ≤15.3 中无效 —— 这些不是前缀能解决的问题，属于语法层面缺失。
降级必须发生在编译阶段，而非运行时：
-
var(--color)→ 改用预处理器变量（如 Less 的@primary-color），编译后直接输出值 -
aspect-ratio: 16/9→ 手写 padding-top hack，或用 JS 动态计算（但会引入运行时依赖） - 所有降级逻辑都要显式写出，不能指望工具链自动推断；尤其注意 Tailwind 的
aspect-ratio类在 IE 中完全不生效，必须另起一套 class
真正麻烦的从来不是加前缀，而是判断哪些特性根本不能加前缀——比如 gap 在 flex 容器里，IE 连 -ms-gap 都不存在。这类问题必须在写代码时就决定降级方案，而不是等上线后看样式崩了再补。
