Firefox 布局偏差源于渲染引擎差异而非 Less 编译，关键问题包括 flex:1 需加 min-width:0、grid fr 依赖可测容器尺寸、gap 应拆分为 row/column-gap、align-items 不应依赖默认值，须在 Firefox 中用 Computed 面板验证实际生效。
Less 编译本身不导致 Firefox 布局偏差，真正出问题的是编译后 CSS 在 Firefox 中的渲染行为差异——尤其是 Flex 和 Grid 的默认策略、fr 单位计算、gap 解析和基线对齐逻辑。修复关键不是改 Less 写法，而是针对性约束 CSS 输出并验证 Firefox 实际生效路径。
为什么 Firefox 中 flex: 1 不拉伸？必须加 min-width: 0
Firefox 默认给 flex 子项设 min-width: auto，而 Chrome/Safari 实际按 min-width: 0 行为兜底。只要子项含文字或 <img>，flex: 1 就会被阻塞，看起来“没占满”。
- 显式加
min-width: 0（水平布局）或min-height: 0（垂直布局），不能只靠flex: 1 - 改用完整写法：
flex: 1 1 0，避免flex-basis被解析为内容宽度 -
<img>或<iframe>类子项额外加flex-shrink: 0，否则 Firefox 可能错误压缩 - 别用
overflow: hidden代替min-width: 0——它掩盖问题但不解决弹性分配逻辑
Firefox 下 grid fr 单位失效？检查容器尺寸是否可测
fr 在 Firefox 中严格依赖容器有可测量的内联尺寸。若父级用了 float、position: absolute 或 min-width: fit-content，fr 可能回退为 0px，列直接坍缩。
- 给 Grid 容器加
width: 100%或max-width: 100%，尤其在弹性布局子项或绝对定位上下文中 - 避免混用
fr和minmax(300px, 1fr)；Firefox 对该组合可能触发两次重排，改用minmax(300px, 2fr) - 确认
display计算值是grid，不是-ms-grid或block——旧前缀会让整个 Grid 退化
gap 在 Firefox 中失效或重叠？拆开写 row-gap/column-gap
Firefox 对 gap 的支持虽已稳定，但与 align-content、overflow 或 transform 共存时易出问题：间隙消失、数值被忽略、甚至网格项重叠。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
立即学习“前端免费学习笔记（深入）”；
- 优先用
row-gap: 12px+column-gap: 12px替代gap: 12px，规避 Safari/Edge 早期兼容性遗留问题 - 禁用
align-content与gap同时作用；如需多行对齐，改用row-gap+justify-content - 若 Grid 容器有
transform或绝对定位，Firefox 可能跳过间隙计算——此时用margin显式模拟更可靠
Firefox 中文字和按钮底部不对齐？别信 align-items 默认值
Flex 容器混用文字、图标、<button> 等 inline 元素时，Firefox 会隐式触发 align-items: baseline，Chrome/Safari 常默认走 stretch，造成视觉错位。
- 显式声明
align-items: stretch或align-items: flex-start，不要依赖默认值 - 单个子项用
align-self: flex-start局部修正，比全局设更安全 - 禁用
vertical-align和line-height与 Flex 同时作用——它们会干扰基线计算 - 打开 Firefox 「Layout」面板 → 勾选「Show flexbox overlays」，确认主轴/交叉轴高亮是否符合预期
所有这些偏差都不是 Less 编译出来的，而是你在 Less 里写的规则，在 Firefox 渲染时因引擎实现差异被放大。最危险的误操作是：看到 Chrome 正常就认为没问题，结果上线后 Firefox 用户看到的是错位、塌缩或空白——务必在真实 Firefox 环境中用 Computed 面板逐条验证 display、flex、grid、gap 是否真被识别并参与布局。
