如何通过Autoprefixer解决旧版浏览器的CSS前缀问题？-css教程-PHP中文网

autoprefixer不会自动修复css兼容问题，仅按browserslist配置在已有标准语法上补前缀；它不转译语法、不降级特性，如display: grid不会转为-ms-grid，gap不生成-webkit-grid-gap，ie11需手动写-ms-flexbox并启用flexbox: '2009'。

如何通过autoprefixer解决旧版浏览器的css前缀问题？

Autoprefixer 不会“自动修复”旧版浏览器的 CSS 兼容问题，它只在你写了标准语法的前提下，按需补前缀；写错、漏写、或用了不被支持的语法，它不会纠正，也不会降级。

为什么 display: flex 在 IE11 里没 -ms-flexbox？

Autoprefixer 对 display: flex 加前缀是有条件的：必须同时满足两个前提——目标浏览器列表明确包含 IE11（如 ["IE >= 11"]），且 Autoprefixer 版本支持老式 Flexbox 语法。

v10+ 默认关闭 flexbox: '2009'，即不再生成 display: -ms-flexbox；需手动启用：require('autoprefixer')({ flexbox: '2009' })
browserslist 写成 > 0.5% 或 last 2 versions 通常不含 IE，结果就是完全不加 -ms- 前缀
如果源码里已写 display: -webkit-flex，Autoprefixer 会跳过整条声明，认为你已接管兼容逻辑

Grid 布局在 IE10/11 里白屏？Autoprefixer 不负责语法转换

Autoprefixer 不会把 display: grid 改成 display: -ms-grid，它只在你 already 写了 display: -ms-grid 的前提下，补 -ms-grid-columns 等属性。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

IE10/11 完全不解析 display: grid，声明直接被忽略——这不是前缀问题，是语法不识别
必须手写双版本：display: -ms-grid; display: grid;，否则 Autoprefixer 无从下手
grid-gap 在 Safari ≤10.1 中无效，Autoprefixer 默认不输出 -webkit-grid-gap；需人工双写：-webkit-grid-gap: 12px; grid-gap: 12px;
启用 grid: true 只会让 gap 展开为 grid-row-gap/grid-column-gap，仍不加 -webkit-

Vue / React 项目里前缀没生效？样式根本没进 PostCSS 流程

不是 Autoprefixer 失效，而是 CSS 没经过它处理。Vue 单文件组件的 <style></style>、React 的 import './index.css' 都需要显式接入 postcss-loader。

Vite 项目：检查 vite.config.js 的 css.postcss 是否返回含 autoprefixer() 的配置对象
Vue CLI：确认未在 vue.config.js 中设置 css.requireModuleExtension: false（这会跳过 PostCSS）
CRA eject 后：webpack.config.js 中 postcss-loader 的 postcssOptions.plugins 必须包含 autoprefixer()
public/ 目录下的 CSS 文件用 <link> 引入？它绕过构建流程，Autoprefixer 完全不触碰