IE11 完全不支持 gap（含 row-gap/column-gap），解析阶段直接丢弃声明；唯一可靠方案是特性检测降级为 margin 或引入 PostCSS 自动转换。
IE11 完全不支持 gap，连 -ms-gap 都不存在，硬加前缀或尝试 padding 会引发尺寸错乱或换行异常——唯一可靠路径是降级为 margin + 特性检测，或引入 PostCSS 自动转换。
IE11 中 gap 被解析器直接丢弃，不是渲染 bug
写 gap: 12px 在 IE11 里等于没写，子项紧贴排列，且控制台不会报错、也不会警告。这不是样式优先级问题，也不是 flex 属性未生效，而是 CSS 解析阶段就跳过了该声明。所有基于 gap 的布局（包括 row-gap、column-gap）在 IE11 全系均无效。
-
display: -ms-flexbox可启用 Flex 基础能力，但gap不在其支持列表中 -
padding模拟会导致flex-basis计算偏差，尤其当子项用了flex: 1或百分比宽度时，IE11 会错误分配剩余空间 - 用
margin时若未排除末项，会出现右侧/底部多余空白；若用了flex-wrap: wrap，:not(:last-child)会失效（换行后“最后一项”不固定）
用 @supports 分离现代与 IE 样式
最轻量、零构建依赖的解法：用特性检测隔离规则，避免 polyfill 工具链介入。IE11 不识别 @supports，所以它只会执行 fallback 规则。
- 确保容器声明
display: flex和display: -ms-flexbox双写 - 现代浏览器走
@supports (gap: 0) { .container { gap: 12px; } } - IE11 走
.container > *:not(:last-child) { margin-right: 12px; }（仅限flex-direction: row且flex-wrap: nowrap） - 若需支持换行，必须改用
inline-block或 JS 动态插入占位元素——纯 CSS 无解
PostCSS postcss-gap-properties 自动生成兼容代码
适合已接入构建流程的项目。它不是运行时 JS 补丁，而是在编译期把 gap 拆解为负 margin 抵消 + 子项正向 margin 的组合，能处理嵌套、百分比单位和 flex-wrap 场景。
立即学习“前端免费学习笔记（深入）”；
- 安装：
npm install postcss-gap-properties --save-dev - 配置 PostCSS：
plugins: [require('postcss-gap-properties')] - 输入：
.grid { display: flex; gap: 1rem; } - 输出含
margin补偿逻辑，无需手动维护:not(:last-child)或计算负值 - 注意：它不处理 IE11 的
-ms-flex前缀，需搭配autoprefixer单独补全
动态子项或 flex-wrap 场景下，margin 方案极易翻车
当子项由 JS 动态增删，或容器启用了 flex-wrap: wrap，:not(:last-child) 无法判断“每行末尾”，导致换行后首项间距过大、对齐偏移。此时强行用 CSS 修复成本远高于降级。
- 简单列表可改用
display: inline-block+font-size: 0消除空白符，再设margin - 复杂布局建议直接放弃 IE11 的 Flex 间隙，用
float或绝对定位做静态网格 - 若必须保留 Flex 结构，可封装轻量 JS：遍历子项，用
getBoundingClientRect()判断换行位置，在每行末尾插入<div class="gap-filler"></div> - 服务端渲染（SSR）中，hydration 前后子项数量不一致时，
:not(:last-child)会短暂错位，建议加data-hydrated类延迟应用 margin 规则
真正麻烦的不是怎么写兼容代码，而是 IE11 对 flex-basis、margin 和 justify-content 的组合计算逻辑与现代浏览器完全不同——哪怕一行 gap 被替换，也可能牵出三处布局偏移。动手前先确认：是否真有必要支持 IE11？如果只是内部系统或用户统计显示占比低于 0.5%，砍掉兼容反而更省事。
