fr单位在IE11、Safari 9–10.1中被语法层面忽略，整条grid声明失效；IE11仅支持2012草案版Grid，不识别fr、minmax()等现代关键字，Safari 9–10.1遇1fr会静默丢弃列/行定义，回退为单列流。
fr单位在IE11、Safari 9–10.1等旧浏览器中根本不会被解析，直接忽略整条声明，不是“计算错”，而是“当它不存在”。
为什么fr在旧浏览器里等于没写
IE11只认2012年草案版Grid语法，不支持fr、minmax()、auto-fit这些现代关键字；Safari 9–10.1虽支持display: grid，但遇到1fr会静默丢弃整条grid-template-columns或grid-template-rows声明，回退到浏览器默认的单列流布局。这不是精度问题，是语法层面的不识别。
- 检查开发者工具的Computed面板，
grid-template-columns值在IE11里显示为空字符串 -
@supports (grid-template-columns: 1fr)在IE11中返回false，但@supports (display: grid)却返回true——这是典型陷阱 - 不要指望autoprefixer加前缀：v9+已移除对IE Grid的支持，
grid: true选项对fr完全无效
用百分比替代fr时的关键约束
百分比单位能用，但必须满足两个硬条件：容器宽度可预测、列数固定。否则50%可能撑破容器或留白。
- 父容器必须有明确宽度（
width或max-width），不能依赖fit-content或auto - 所有列宽百分比之和必须严格等于100%，例如两列均分：
grid-template-columns: 50% 50%，不能写49% 51%（舍入误差会导致换行） - 避免混用
%和px：grid-template-columns: 200px 50%在旧浏览器中，50%按整个容器宽算，不是“剩余空间”的50%
百分比方案的实际落地写法
不能直接把1fr 1fr替换成50% 50%就完事。要配合box-sizing: border-box和显式gap模拟，否则边框/内边距会破坏比例。
立即学习“前端免费学习笔记（深入）”；
- 先写基础flex降级（兼容性最稳）：
display: flex; flex-wrap: wrap;，再用@supports覆盖grid - 若坚持用百分比Grid，需手动预留
gap空间：比如目标gap: 10px，三列布局就写grid-template-columns: calc(33.333% - 6.666px) calc(33.333% - 6.666px) calc(33.333% - 6.666px)（10px gap被三列均摊） - IE11必须加
-ms-grid-columns并配合-ms-grid-column逐项定位，此时百分比无效，只能用像素或fr（但IE11的-ms-grid-columns: 1fr 2fr和现代fr语义不同）
更现实的取舍建议
为IE11单独维护一套%或px Grid，成本远高于直接切到flex。尤其当涉及响应式（如auto-fit）、跨行列（grid-column: 1 / -1）或动态内容时，百分比方案极易断裂。
- 简单卡片列表：用
display: flex; flex-wrap: wrap;+flex-basis: calc(33.333% - 10px)更可控 - 需要精确行列对齐？老老实实写
float或inline-block，并用margin模拟gap - 如果项目仍要求支持IE11，优先确认是否真有必要——2026年4月起，全球IE11使用率已低于0.03%，多数CDN和框架已停止兼容
