postcss-grid-kiss 的 fallback 必须显式配置 fallback: true 才生效，默认不生成任何回退代码；其生成的 @supports 规则在 ie 中被忽略，需配合 js 检测或预展开方案；关闭 fallback 可显著减小 css 体积，且 autoprefixer 无法替代其布局回退功能。
postcss-grid-kiss 的 fallback 配置必须显式开启
默认情况下，postcss-grid-kiss 不生成任何回退代码——它只输出标准 CSS Grid。想让旧浏览器（比如 IE11）也能显示基本布局，必须手动启用 fallback: true 选项。
常见错误是以为装了插件就自动兼容，结果在 IE11 里整个网格塌成一列或完全不渲染。这是因为插件检测到目标浏览器不支持 display: grid 后，只有 fallback 开启才会插入基于 position: absolute + calc() 的模拟逻辑。
- 配置写法必须是
require('postcss-grid-kiss')({ fallback: true })，不能只传空对象 -
browsers参数建议同步指定，例如['IE 11', 'last 2 versions']，否则 caniuse.js 检测可能按默认范围误判 - 如果项目已用
browserslist，仍建议在插件配置里复写一次，避免构建工具读取顺序导致 fallback 被跳过
fallback 生成的代码依赖 CSS Supports API，IE 不认 @supports
postcss-grid-kiss 的 fallback 输出包含 @supports (display: grid) 规则，但 IE 全系（包括 IE11）根本不解析 @supports 语法——它直接忽略整块规则，导致 fallback 样式压根不生效。
这不是插件 bug，而是 CSS 原生限制。你看到 IE 里布局空白或错位，大概率是因为 fallback 样式被浏览器当作了无效 CSS 丢弃了。
- 必须配合运行时 JS 检测（如
CSS.supports('display', 'grid')）动态加载 fallback 类名，或用postcss-custom-media将@supports提前展开为独立选择器 - 不要指望仅靠 PostCSS 链路解决 IE 兼容——
@supports在 IE 中等于不存在，连降级提示都不会有 - 若必须支持 IE11，建议把 fallback 逻辑拆出来单独打包，通过
<script></script>注入，绕过 CSS 解析阶段
关闭 fallback 能显著减小 CSS 体积
如果你的项目实际不需支持 Grid 无原生支持的浏览器（比如只面向 Chrome 80+、Safari 14.1+、Edge 90+），关闭 fallback 可减少 50% 以上输出体积——尤其当网格结构复杂、嵌套多层时。
很多人误以为“开了更安全”，其实反而引入大量冗余代码：每个 grid-kiss 声明都会额外生成一套绝对定位 + 手动计算 left/top/width/height 的规则，且无法被 gzip 有效压缩。
- 关闭方式：明确设
fallback: false，或删掉该字段（默认就是 false） - 验证是否生效：检查输出 CSS 是否还存在
position: absolute、calc()、top:等 fallback 特征代码 - 注意
browserslist配置冲突：即使插件里写了fallback: false，若browserslist里留着IE 11，某些构建工具可能强制触发 fallback
和 autoprefixer 混用时，前缀不解决 Grid 回退问题
autoprefixer 对 display: grid 什么也不做——它不会加 -ms-grid，也不会把 gap 降级成 margin。IE11 的 -ms-grid 和现代 Grid 是两套完全不同、互不兼容的语法体系。
试图靠 autoprefixer 补齐 Grid 兼容性，只会得到一个没报错但完全不工作的页面：Grid 容器在 IE11 里变成普通块级元素，子项堆叠排列，grid-area 等声明全被忽略。
-
autoprefixer只处理已有标准属性的前缀，不生成替代布局代码 -
postcss-grid-kiss的 fallback 和autoprefixer是正交关系：一个管“有没有”，一个管“怎么写”，不能互相替代 - 如果同时用了两者，确保
autoprefixer在postcss-grid-kiss之后执行，否则 fallback 生成的 calc() 表达式可能被错误转义
@supports、calc()、grid-area），旧浏览器要么不识别，要么识别但行为异常。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
