firefox按钮错位因subgrid需111+版本且必须启用layout.css.grid-2和layout.css.grid-template-subgrid-value.enabled两个about:config开关并完全重启，否则getcomputedstyle返回空字符串或"none"；chrome 115+、safari 17.4+开箱即用，但safari 17.4前所有ios版本（含ios 16.x）静默丢弃subgrid声明导致布局错乱；@supports在firefox 111–113存在bug，会错误返回true，真实检测须用getcomputedstyle(el).gridtemplaterows严格验证是否返回"subgrid"。
为什么Chrome看着对齐，Firefox里按钮却错位？
Subgrid 在 Firefox 111+ 才真正启用，且必须手动开启两个 about:config 开关：layout.css.grid-2 和 layout.css.grid-template-subgrid-value.enabled，改完不完全重启浏览器，getComputedStyle(el).gridTemplateRows 仍会返回空字符串或 "none"。Chrome 115+、Safari 17.4+ 是开箱即用，但 Safari 17.4 之前所有 iOS 版本（包括 iOS 16.x）均不支持——此时 grid-template-rows: subgrid 被静默丢弃，子元素退化为无行轨道的普通网格，布局必然错乱。
@supports (grid-template-rows: subgrid) 为什么在Firefox里总返回true？
Firefox 111–113 存在已知 bug：@supports 会错误地声称支持 subgrid，即使两个底层开关未启用。真实检测不能只靠 CSS 条件，必须结合 JS 验证：
- 选一个已设
grid-template-rows: subgrid的元素el - 执行
getComputedStyle(el).gridTemplateRows - 若返回
""、"none"或"initial"，说明 subgrid 实际未生效 - 仅当返回
"subgrid"时，才确认浏览器真正解析了该值
开发者工具里 grid-template-rows 显示为 none，是哪里写错了？
这不是兼容性问题，而是声明被浏览器直接忽略——常见原因有四个，按发生频率排序：
- 父容器没写
grid-template-rows，只用了grid-auto-rows或gap—— subgrid 不继承隐式轨道 - .child 元素不是 .parent 的**直接子节点**，中间存在
display: contents、fieldset或 JS 插入的 wrapper 层 - .child 漏了
display: grid，只写了grid-template-rows: subgrid—— 它必须是网格容器本身 - 父容器的轨道由
repeat(auto-fit, ...)动态生成，没有显式行列数，subgrid 无模板可继
怎么让 subgrid 在 Safari 16 或旧版 Firefox 里不崩？
不能指望降级成“差不多对齐”，而要确保子元素至少能覆盖全部父轨道。关键动作是：在 @supports 外层单独写回退规则，并手动匹配轨道跨度：
@supports (grid-template-rows: subgrid) {
.parent { grid-template-rows: 40px 1fr 60px; }
.child { grid-row: span 3; grid-template-rows: subgrid; }
}
/* 不支持时的回退 */
.parent { grid-template-rows: 40px 1fr 60px; }
.child { grid-row: 1 / 4; }
注意：回退方案中 grid-row: 1 / 4 的终点必须是父轨道总数 + 1（三行 → 线编号 1/2/3/4），否则子元素无法占满整块区域，内容会被压缩或溢出。
真正难的不是写出 grid-template-rows: subgrid 这一行，而是确保从 DOM 结构、父级轨道定义、媒体查询作用域到浏览器引擎开关，整条链路上没有任何一个环节悄悄断开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
