Edge 16–18 存在多项 Grid 兼容性问题：gap 导致行高塌陷、grid-template-areas 在打印中被忽略、subgrid 完全不支持且 display: contents 加剧失效、float 与 grid 混用引发布局错乱，需针对性降级处理。
Edge 16–18 的 gap 解析存在行高塌陷 bug
Edge 16–18 虽标称支持 gap，但实际会错误计算行内元素的行高，导致文字上浮、卡片高度塌陷、网格线错位。这不是样式没生效，而是渲染引擎在计算 row-gap 时把 line-height 当作 0 处理。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Myosin Hivemind Knowledge Retrieval
下载
搜索 Hivemind 精选的 Web3 营销知识库（RAG），获取从业者洞察、框架、实操指南和案例研究。当：(1) an... 时使用此技能。
- 避免在含文字的 grid item 中依赖
gap做垂直对齐，改用align-items: start+ 显式padding - 必须用
row-gap和column-gap分开写，gap: 12px在 Edge 16–18 中可能被完全忽略 - 若 item 内有
img或svg，加vertical-align: top防止基线对齐干扰 gap 计算
grid-template-areas 在打印和旧 Edge 中被静默丢弃
Edge 16–18 的打印引擎和部分渲染路径中，grid-template-areas 不会被解析，grid-area 值等同于未声明，子项退化为普通块级流，视觉上“堆叠”或“左对齐”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
@media print和针对 Edge 的条件样式中，删掉grid-template-areas，改用grid-column: 1 / -1和grid-row: 2这类线号定位 - 不要依赖
@supports (grid-area: header)检测——Edge 16–18 会返回 true，但实际不执行区域映射 - 检测更可靠的方式是：
@supports (display: grid) and (row-gap: 0)，它能排除 Edge 16–18 这类“半支持”环境
subgrid 在 Edge 中根本不可用，且 display: contents 会加剧失效
Edge 全系（包括 18）不支持 subgrid，连 @supports (grid-template-rows: subgrid) 都返回 false；若父容器还用了 display: contents，子元素直接脱离网格上下文，布局彻底崩解。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有
subgrid相关代码必须包裹在@supports块内，且 fallback 必须是手动指定的行列范围，例如：grid-row: 1 / 4 - 禁用
display: contents与subgrid共存——哪怕只是中间 wrapper，也会切断轨道继承链 - 检查 DOM 层级：确保
subgrid元素的**直接父元素**就是定义了grid-template-rows的容器，中间不能插任何非 grid 容器
float 与 grid 混用时，Edge 会保留 float 行为但破坏 grid 流
Grid 规范要求 float 对 grid item 无效，但 Edge 16–18 有时仍尝试应用 float，结果是：item 既没脱离文档流，又没按网格定位，出现偏移、重叠或高度塌陷。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 立即删除所有 grid 容器子项上的
float声明——Grid 自带justify-self、place-items等替代方案 - 若第三方组件强制注入 float，用
overflow: hidden或display: flow-root包裹该组件，再将其作为单个 grid item 放入布局 - 避免在 grid item 内部用
float做图文环绕——改用shape-outside或 Flex 布局模拟
row-gap/column-gap 替代 gap，用线号替代命名区域，用显式行列范围兜底 subgrid，并彻底隔离 float。 
