calc()跨浏览器不一致主因是语法未达标：加减号缺空格致整条声明被Firefox/Safari静默丢弃、Chrome可能宽容补全；单位缺失（如20非20px）、0无单位、CSS变量未带单位、Sass/Less插值漏空格或乘除违反右侧须为纯数字等规则，均导致解析失败而非计算错误。
calc() 在不同浏览器中计算结果不一致，绝大多数情况不是“浏览器算错了”，而是你写的表达式在某些引擎里根本没被解析——Firefox 严格拒收、Chrome 宽容补全、Safari 某些版本静默丢弃，表面是结果差异，根子是语法未达标。
加减号两侧缺空格导致整条规则被跳过
这是跨浏览器不一致的头号原因。+ 和 - 在 calc() 中既是运算符也是数值符号，没有空格，浏览器就无法区分 100%-20px 是“100% 减 20px”还是“一个叫 100%-20px 的非法单位”。
-
calc(100% - 20px)✅ 所有现代浏览器都识别 -
calc(100%-20px)❌ Firefox/Safari 直接忽略整条声明，Chrome 可能悄悄补全但不可靠 - Sass/Less 中变量拼接容易丢空格：用
calc(100% - #{$gap})（Sass）或calc(~"100% - @{gap}")（Less），别写calc(100% - $gap)
单位缺失或混合引发类型推导失败
calc() 要求参与加减的值必须可对齐到同一维度基准，单位不显式、不可转换或 0 无单位，各浏览器处理策略不同。
-
calc(100% - 20)：Firefox 直接失效；Chrome 可能转成20px或忽略——别依赖 -
calc(1em + 1px)：旧版 Safari（≤15.3）可能计算异常，优先改用1rem + 2vw这类可统一缩放的组合 -
0必须带单位：calc(0px + 10px)✅，calc(0 + 10px)❌（类型不明，Firefox/Safari 静默丢弃） - CSS 变量如
--gap: 20不行，得写--gap: 20px，否则calc(100% - var(--gap))在多数引擎里罢工
乘除运算违反硬性语法限制
乘除不是“随便乘除”，右侧操作数必须是纯数字，且两个带单位值不能相乘——这个限制所有浏览器都严格执行，但错误提示方式不同。
立即学习“前端免费学习笔记（深入）”；
-
calc(100% / 3)✅ 合法 -
calc(50px * 2)✅ 合法 -
calc(50px * 2px)❌ 所有浏览器报错，DevTools 显示 invalid value -
calc(var(--width) * 2px)❌ 即使--width是100px，右边2px带单位，仍非法
Safari 的 aspect-ratio + calc() 隐藏布局偏差
这不是 calc() 本身问题，但常被误判为“计算不一致”：Safari 15.4–16.3 在 display: grid 或 flex 容器下，对同时设了 aspect-ratio 和 width: 100% 的子元素，会错误地将 height: calc(...) 解析为撑满视口。
- 临时解法：父容器加
min-height: 0或align-items: start - 更稳方案：用伪元素 +
padding-top模拟宽高比，配合@supports (-webkit-appearance: none) and (not (aspect-ratio: 1))单独给 Safari 降级 - 验证方式：别只看 Chrome，必须在真机 Safari 上测渲染结果，Computed 面板里看 height 是否符合预期
真正麻烦的从来不是“哪个浏览器不支持”，而是同一行 calc() 表达式，在 Firefox 里灰掉、Chrome 里生效、Safari 里算出奇怪高度——根源往往藏在空格、单位、变量插值这三处细节里，漏掉任何一个，就等于把兼容性主动交出去。
