calc() 的正确使用关键在于严格遵循空格、单位和运算规则：加减号两侧必须有空格，所有带单位值须显式写单位，禁止不可转换单位混合及双单位乘除，Safari 存在 aspect-ratio + calc() 布局 bug，需手动验证多浏览器渲染。
calc() 在现代浏览器中基本可用，但 Firefox 和 Safari 对语法错误更敏感，Chrome 有时会“宽容”处理；关键不是“能不能用”，而是“怎么写才不崩”。
calc() 的空格规则必须严格遵守
加减号两侧缺空格是 calc() 失效的最常见原因，尤其在复制粘贴或模板生成时容易漏掉。
-
calc(100% - 20px)✅ 正确（有空格） -
calc(100%-20px)❌ 全部浏览器都会忽略该声明（被解析为无效维度） -
calc(+10px)或calc(-5em)是合法的（带符号数字），但calc(100%--20px)不行——双减号不被识别
单位缺失在 Firefox 中直接失效，Chrome 可能悄悄补全
比如 calc(100% - 20)：Firefox 会完全跳过该样式，Chrome 有时会当成 calc(100% - 20px) 处理，但不可依赖。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 所有参与运算的带单位值，都必须显式写出单位：
calc(100% - 20px)、calc(1rem + 2vw) - 禁止混合不可转换单位：
calc(1em + 1px)在旧版 Safari（≤15.3）中可能计算异常，建议用rem或vw替代em做跨单位组合 - 乘除法有硬性限制：
calc(50px * 2)✅，calc(50px * 20px)❌（不允许两个带单位值相乘）
Safari 的 aspect-ratio + calc() 组合有隐藏布局 bug
当父容器是 display: grid 或 flex，子元素同时设了 aspect-ratio 和 width: 100%，再用 calc() 控制高度时，Safari 15.4–16.3 会把高度撑满视口。
立即学习“前端免费学习笔记（深入）”；
- 这不是
calc()本身的问题，而是 Safari 对 intrinsic size 的计算偏差 - 临时解法：给父容器加
min-height: 0或align-items: start - 更稳方案：对 Safari 单独用伪元素 +
padding-top模拟宽高比，配合@supports (-webkit-appearance: none) and (not (aspect-ratio: 1))检测
真正容易被忽略的不是兼容性列表，而是 calc() 表达式里那些“看起来差不多”的写法——少一个空格、漏一个单位、多一层括号嵌套，在不同引擎里可能表现完全不同。写完务必在 Firefox 和 Safari 下手动验证渲染结果，别只信 Chrome 预览。
