firefox esr升级后布局异常源于新版回归规范：var()须定义在:root、fr需容器有可测宽度、auto-fit可用空间判定更严，应检查computed值并加grid-auto-columns等保底。
Firefox ESR（Extended Support Release）升级后布局异常，不是“新版本变坏了”，而是旧版ESR长期靠非标准行为兜底，新版回归规范导致原有写法失效——典型如var(--x)在@media内定义、fr在无宽容器中被静默忽略、auto-fit可用空间判定逻辑收紧。
Firefox ESR 115.x 升级到 128+ 后 var() 规则块静默丢弃
ESR 115.x 对 CSS 变量的解析较宽松：即使 var(--color) 引用的变量定义在 @media 块内部，或包裹在 calc() 中存在语法歧义，它仍可能尝试计算并渲染。但 Firefox 128+ 严格执行 CSS Syntax Module 3，一旦变量作用域或嵌套不合法，整条规则块（包括后续声明）会被直接跳过，不报错、不警告。
- 检查方式：打开开发者工具 → Elements → 找到异常元素 → 查看 Styles 面板中对应规则是否“变灰”或完全不出现
- 修复路径：把所有
:root外的变量定义（尤其在@media或@container内）全部上提到顶层:root；避免calc(var(--x) * 2)这类嵌套，改用calc(2 * var(--x)) - 临时验证：在控制台执行
getComputedStyle(document.documentElement).getPropertyValue('--color')，若返回空字符串，说明变量未注册成功
fr 单位在新版 Firefox 中坍缩为 0 的真实触发条件
Firefox 128+ 对 fr 的“可测量内联尺寸”要求更刚性。旧版 ESR 在 flex 子项、position: absolute 或 min-width: fit-content 父容器中可能侥幸分配出像素值，新版则直接回退为 0px，导致整列消失。
- 必须显式设置容器宽度：
width: 100%或max-width: 100%，不能依赖父级 flex 分配后的隐式尺寸 - 禁用
min-width: fit-content作为 Grid 容器父级；若必须用，给 Grid 容器加width: 0+min-width: 100%组合来重置尺寸锚点 - 避免
grid-template-columns: 1fr minmax(300px, 1fr)这类混用，Firefox 128+ 会因两次重排触发轨道清零；改用1fr minmax(300px, 2fr)
auto-fit 列数从“看起来够用”变成“少一列”的判定差异
ESR 115.x 对 repeat(auto-fit, minmax(250px, 1fr))) 的可用空间计算偏宽松，常多生成一列并留白；Firefox 128+ 严格按“容器内联尺寸 ≥ 单个 minmax() 最小值 × 1”才启动重复，否则返回 0 条轨道——这在窄屏或缩放 125% 时极易触发。
- 立即生效的保底方案：加
grid-auto-columns: 250px，确保至少有一列存在 - 改用
auto-fill替代auto-fit，它在新版中收缩逻辑更稳定，且不会因“无足够空间”而归零 - 禁用父级
overflow: hidden或contain: layout，这两者会截断 Firefox 对可用宽度的测量，是隐藏最深的元凶
新版 Firefox 不再容忍模糊写法，所有“以前能跑”的布局问题，本质都是旧版靠实现偏差兜底。真正要盯住的不是浏览器版本号，而是 computed 样式里 display 是否真为 grid、getComputedStyle 返回的 gridTemplateColumns 是否为空、以及 var() 是否在 :root 中明确定义——这些才是不可绕过的事实锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
