firefox中百分比宽高“算不准”实为解析失败或未触发计算：computed中若显示auto或100%而非像素值，说明未生效；常见原因包括父容器缺失宽高、calc()语法错误、空白节点干扰、box-sizing遗漏及flex/grid中height:100%失效等。
Firefox里百分比宽高“算不准”，八成不是它算错了，而是你写的值在它眼里根本没被解析——或者解析时被悄悄跳过了。
先看computed面板里width/height是不是具体像素值
别猜，直接打开开发者工具，选中目标元素 → 切到「Computed」标签页 → 拉到最底下找width和height。如果显示auto或100%（没转成px），说明浏览器压根没算出数值，问题不在“算得不准”，而在“没开始算”。
- 若
width是auto：检查父容器是否设了width，尤其注意浮动、position: absolute或display: inline会让父容器失去“包含块”资格 - 若
height是auto：99%是html或body漏了height: 100%，或中间某层Flex/Grid容器自身没显式高度（比如只写了flex: 1但没给父容器设height） - 若
width是99.99px这种亚像素值：说明Firefox按标准做了舍入，而Chrome可能四舍五入成100px——这不是Bug，是渲染策略差异
calc()表达式有没有被Firefox静默丢弃
Firefox对calc()语法最严格，写错一个空格就整条规则失效，且DevTools里不报错、不标红，只默默跳过。
- 检查加减号两侧有没有空格：
calc(100%-20px)❌ 全部浏览器都当无效；必须写成calc(100% - 20px)✅ - 确认所有数字都带单位：
calc(100% - 0)❌ Firefox/Safari直接忽略；得写calc(100% - 0px)✅ - 查CSS变量是否声明带单位：
--gap: 20❌ 不行；--gap: 20px✅ 否则calc(100% - var(--gap))在Firefox里等于没写 - 用Sass/Less时，插值要加引号：
calc(100% - #{$gap})❌ 容易丢空格；改用calc(100% - #{$gap + "px"})或calc(100% - #{"#{$gap}px"})
浮动布局里百分比宽度错位，先关掉文本节点干扰
HTML源码里的换行符和空格，在Firefox中会被当成文本节点，占0.5–1px宽度，三个width: 33.33%加起来就超100%，最后一项被迫换行。
- 给浮动容器设
font-size: 0，子元素再单独设字号，直接消灭空白节点占位 - 避免用
width: 33.333%这种临界值，改用width: calc(100% / 3)或width: 33.3%+margin-right: 0.1%留容错空间 - 检查父容器是否有
padding：浮动子项的width: 100%是相对于父内容区算的，若父有padding: 12px，实际可用宽度是100% - 24px，得用width: calc(100% - 24px) - 确认
box-sizing已全局生效：*::before, *::after漏掉会导致伪元素仍按content-box算，撑破布局
Flex/Grid容器中height: 100%失效，别信“看起来正常”
Chrome可能宽容地把Flex容器当参照物，Firefox和Safari（尤其14–15.6）根本不认——除非父容器有显式height（min-height或flex: 1推导出的高度都不算）。
- 给Flex父容器加
height: 100vh或height: 400px，而不是只靠flex: 1 - Safari 15.6及更早版本对
aspect-ratio+height: calc()有隐藏偏差，临时解法是父容器加min-height: 0或align-items: start - 垂直方向别写
height: 50%，改用flex-basis: 50%或flex: 0 0 50%，这才是Flex里真正起效的尺寸控制 - 第三方UI库（如Ant Design）常重置
min-height: 0，导致flex: 1拉伸失败，需手动覆盖min-height: auto
真正容易被忽略的，是没在Firefox里单独开一次开发者工具——很多人用Chrome调试完就上线，结果Firefox里calc()整条失效、浮动多出1px、Flex子项高度为0，全因没在目标浏览器里亲眼确认computed值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
