Firefox中flex:1不生效是因默认min-width:auto阻止收缩，修复需显式设min-width:0（水平）或min-height:0（垂直），并用flex:1 1 0替代简写。
Bootstrap 页面在 Firefox 中出现布局错乱，大概率不是框架本身的问题，而是 Firefox 对 flex/grid 渲染更严格、对默认值更“守规矩”导致的。直接修 CSS 比降级 Bootstrap 或加 Polyfill 更快、更轻量。
flex: 1 在 Firefox 里不拉伸？加 min-width: 0 或改用完整写法
这是最常踩的坑：Bootstrap 的 .col 或自定义 flex 子项用了 flex: 1，但在 Firefox 里不占满剩余空间，尤其嵌套在 .row 里时。
- Firefox 默认给 flex 子项设
min-width: auto（水平布局下），只要子项含文字、<img>或 inline 内容，就会卡住flex-grow: 1 - Chrome/Safari 实际按
min-width: 0处理，所以“看起来正常” - 修复方式不是加
overflow: hidden（它只遮掩问题），而是显式声明：min-width: 0 - 垂直布局（
flex-direction: column）则用min-height: 0 - 更稳妥的做法是别写
flex: 1，换成flex: 1 1 0—— 明确flex-basis为 0，避开解析歧义
按钮和文字底部不对齐？别信 align-items 默认值
Bootstrap 的 .btn 和普通文字混排时，在 Firefox 里经常出现按钮底边比文字低一截，或换行后高度塌陷。这不是 bug，是 Firefox 严格执行基线对齐（align-items: baseline），而 Chrome/Safari 常退化为 stretch。
- 全局修复：在
.row或.d-flex容器上加align-items: stretch或align-items: flex-start - 局部修复：对按钮加
align-self: flex-start，比改全局更安全 - 避免在按钮内部同时用
vertical-align、line-height和 flex 布局——三者叠加在 Firefox 里会触发不可预测的基线计算 - iOS Safari 对
<button>有特殊限制：min-width: 0被忽略，得用min-width: 1px+flex: 1 0 0
Grid 布局中 subgrid 不生效？Firefox 支持但其他浏览器不认
如果你在 Bootstrap 5.3+ 里用了 subgrid（比如表单字段复用父列轨道），Firefox 111+ 能跑，但 Chrome 114 及更早、Safari 17.3 及更早压根不识别该语法——不是“没效果”，而是 CSS 引擎直接跳过整条声明。
立即学习“前端免费学习笔记（深入）”；
-
@supports (grid-template-columns: subgrid)检测不可靠，旧版浏览器返回空字符串，不能只靠它包一层 - 稳定写法是用
grid-column: subgrid（而非grid-template-columns: subgrid），且要求子元素是父网格的直系网格项 - 降级必须手动复制列定义：父容器用
--form-cols: 120px 1fr，子元素设grid-template-columns: var(--form-cols)，再对每个子代显式写grid-column: 1/grid-column: 2 - 注意
display: contents会让subgrid彻底失效——封装组件时慎用
火狐加载 CSS 失败或解析中断？先查编码和语法错误
页面整体排版崩溃（如导航栏左偏、文字重叠、容器塌陷），往往不是样式写错，而是 Firefox 遇到硬性错误后静默丢弃后续所有规则。
- 检查 Network 面板中 CSS 请求状态码是否为 200；Preview 里是否显示纯 CSS 文本，还是 HTML 错误页或乱码
- UTF-8 with BOM 的 CSS 文件在 Firefox 中极不稳定，容易在
@import或@media前插入不可见字符，导致后续全失效 - 逐条禁用 Styles 面板里的 CSS 规则，观察哪一条取消后页面立刻恢复——常见雷区：
@keyframes漏括号、grid-template-areas引号不配对、var(--x)引用不存在变量 - 执行
document.querySelectorAll('link[rel="stylesheet"], style').forEach(el => el.remove())，若退化为语义清晰的纯 HTML，则确认是 CSS 层问题
Firefox 的“严格”不是缺陷，而是更贴近规范。真正难的不是加一堆 hack，而是把那些被 Chrome 惯坏的默认值——min-width: auto、隐式 baseline、静默忽略语法错误——一个个显式写出来。漏掉任意一个，都可能让整块布局在 Firefox 里突然失重。
