老旧浏览器对calc()的解析是静默丢弃整条声明，而非计算错误；Chrome≤83不支持除法右侧带单位、乘法两侧均带单位、运算符缺空格；预处理器需转义避免提前编译；var()和vmax/vmin在旧版中完全不识别；calc()不可嵌套于颜色函数内。
老旧浏览器（Chrome ≤83、旧版 Edge 12–18、Android Stock Browser ≤4.3）对 calc() 的解析不是“计算不准”，而是直接静默丢弃整条声明——你改了代码却看不到效果，不是漏写了分号，是浏览器压根没认出这行 CSS。
Chrome ≤83 中除法/乘法单位组合被整条跳过
它不报错，但 calc(100% / 20px) 和 calc(20px * 2em) 都会消失。关键限制有三条：
-
/右侧必须是纯数字：用calc(100% / 3)✅，别写calc(100% / 20px)❌ -
*两侧不能都带单位：用calc(20px * 2)✅ 或calc(50% * 1.5)✅，别写calc(100vw * 0.8)（≤83 小数系数不稳定，建议改用calc(100vw * 4/5)） - 所有运算符
+、-、*、/两侧必须加空格：哪怕负号开头也要写成calc(-50% + 10px)✅，calc(100%-20px)❌ 会连带让同选择器下其他样式失效
Less/Sass 编译器提前吃掉 calc 表达式
预处理器不是帮你写 CSS，是在编译期“算掉”你的表达式——比如 Less 把 calc(100% - 50px) 直接编译成 calc(50%)，Sass 在未用 #{$var} 插值时可能输出 calc(100% - $gap) 这种非法字符串。
- Less 必须用
~"calc(100vh - @{header-height})"：双引号外加波浪线转义，变量用@{xxx}显式插值 - Sass 必须用
calc(100vh - #{$headerHeight})：裸写$headerHeight会被当作语法错误或忽略 - 涉及除法/乘法时，Sass 推荐用
sass:math模块：math.div(100%, 3)比100% / 3更可靠
旧版 Edge 和 Android 浏览器根本不认识 var() 和 vmax/vmin
calc(100% - var(--gap)) 在 Edge 12–18 中不是 fallback 失败，是整条规则被跳过；width: 100vmin 在 Android 4.3 Stock Browser 里等于没写。
立即学习“前端免费学习笔记（深入）”；
- 自定义属性降级必须靠构建时静态替换：
postcss-custom-properties({ preserve: true })输出两行，如color: #007bff; color: var(--primary, #007bff); - vmax/vmin 在旧安卓中无替代方案，只能 JS 动态读取
window.innerWidth/window.innerHeight计算并设内联样式 - 不要在
calc()里嵌套var()做动态运算：旧浏览器既不识别var()，也不支持calc()内部函数调用，双重失效
calc() 不能用于颜色函数参数
rgb(calc(255 - 100), 128, 64) 会静默失效——CSS 规范禁止在 rgb()、hsl() 等颜色函数内部使用 calc()，它只接受字面数值，不接受可计算表达式。
- 可行路径是间接控制：
--dynamic-r: calc(var(--base-r) - var(--offset)); background-color: rgb(var(--dynamic-r), 128, 64); - 更推荐现代方案：
color-mix(in srgb, #ff6b6b 70%, transparent 30%)，语义清晰且规避单位与类型问题 - IE 和旧 Edge 连
var(--x)都不支持，这类间接方案也得配合构建时替换或 JS 回退
真正难的不是写出一个能跑的 calc()，而是确认整个链路上每个环节是否都满足“单位显式、空格完整、变量已展开、函数未嵌套”——少一个条件，整条声明就蒸发，DevTools 里连划掉的痕迹都不会留。
