ie11不支持display: grid，必须手动写display: -ms-grid并显式声明-ms-grid-columns等属性，且子项需用-ms-grid-column/-ms-grid-column-span定位；@supports须组合检测，gap须用margin模拟。
IE11 的布局错乱不是“样式没生效”，而是它压根不认现代 CSS 布局语法——display: grid 和 display: flex 在它眼里等于没写，必须手写带 -ms- 前缀的老草案语法，且每个子项都得显式定位。
为什么写了 display: grid 却在 IE11 里当普通块级元素渲染？
IE11 完全跳过 display: grid 声明，连解析都不做。Autoprefixer v9+ 已彻底放弃自动转换，不会把 grid-template-columns 转成 -ms-grid-columns。
- 必须手动写双声明：
display: -ms-grid放在display: grid前面 -
grid-template-columns: 1fr 2fr得同步补-ms-grid-columns: 1fr 2fr（注意：IE11 对fr支持不稳定，生产环境建议用50% 50%或固定值） - 每个子项都要拆解定位：
grid-column: 2 / 4→-ms-grid-column: 2+-ms-grid-column-span: 2；负索引（如-1）和span关键字在 IE11 中无效
为什么 @supports (display: grid) 会让 Safari 10.1 布局碎裂？
单靠 display: grid 检测会放行 Safari 10.1、iOS Safari 15.6 这类“半支持”浏览器——它们能识别该声明，但不支持 gap、fr 或 auto-fit，结果样式进了 Grid 分支却渲染失败。
- 必须组合检测：
@supports (display: grid) and (grid-template-columns: 1fr)，双条件筛掉绝大多数旧 WebKit 和 IE 全系 -
@supports (gap: 1rem)不可靠：Firefox 63 以前不支持，反而误拦现代浏览器；@supports (justify-content: start)在旧 Safari 的 Grid 上根本无效 - 降级样式（如
display: flex）必须写在@supports块外层，IE11 和 Safari ≤9 会跳过整个块，只有外层规则能生效
为什么 gap 在 IE11 里完全没反应？
gap（含 row-gap/column-gap）在 IE11 解析阶段就被丢弃，DevTools 显示为灰色或带删除线，getComputedStyle(el).gap 返回空字符串。它没有 -ms-gap，加了也无效。
- 横向间隙用
margin-right+:not(:last-child)（仅限flex-wrap: nowrap场景） - 纵向间隙用
margin-bottom+ 父容器负边距抵消：.grid { margin-bottom: -12px; } - 若需支持
flex-wrap: wrap，:not(:last-child)失效，得改用inline-block或 JS 动态判断换行位置
Flex 布局在 IE11 中为什么子项高度塌陷或换行失效？
IE11 把 flex: 1 解析为 flex: 1 1 0%，那个 0% 导致无基准宽度，flex-wrap: wrap 失去换行依据；align-items: stretch 也不拉伸，除非父容器有明确高度且子项没设 height 或 max-height。
- 避免
flex: 1，改用-ms-flex: 0 0 33.33%（三栏）或-ms-flex: 0 0 50%（两栏），小数点不能省 - 父 Flex 容器加
min-height: 0或height: 1px触发stretch行为 - 子项移除
height/max-height，改用min-height+flex-shrink: 0 - 响应式断点中，
flex-basis必须在每个媒体查询里重复声明，IE11 不会动态重算
真正麻烦的不是写多少降级代码，而是 IE11 对 flex-basis 的计算时机不可预测，对 fr 的解析不稳定，且所有 -ms- 属性必须手动配对、显式定位——漏一个，整行就错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
