如何将CSS Grid布局中fr单位错误改用百分比单位解决？

本文共计808个文字，预计阅读时间需要4分钟。

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%可能撑破容器或留白。