旧版浏览器中calc()失效主因是加减号缺空格致整条声明被静默丢弃，需确保运算符两侧有空格、变量带单位、0必须带单位、旧版安卓需fallback降级。
旧版浏览器里 calc() 失效，八成不是它不支持，而是你写的那条声明被浏览器直接跳过——连报错都没有，DevTools 里灰掉、Computed 值还是初始值。
加减号两侧缺空格导致整条规则静默丢弃
这是移动端和旧版 WebKit（iOS Safari ≤15.3、Android 4.4 WebView）最常踩的坑。+ 和 - 不是“可有可无”的空格，是语法铁律：缺一个，整条 calc() 就被判非法，直接忽略。
-
calc(100% - 20px)✅ 正确：减号前后各一空格 -
calc(100%-20px)❌ 失效：紧贴写，解析器当它是非法单位名 -
calc(-50% + 10px)✅ 负号属于数值本身，+ 前后仍需空格 - Sass/Less 中拼接时容易被自动 trim 空格，务必用插值包裹：
calc(100% - #{$gap})（Sass）、calc(~"100% - @{gap}")（Less）
变量值没带单位，calc() 加减运算直接罢工
var(--gap) 在 calc() 里参与加减时，如果 --gap: 20（无单位），展开后变成 100% - 20，浏览器无法判断结果该是 20px 还是 20%，直接丢弃整条声明。
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
- 必须让变量自带单位：
--gap: 20px→width: calc(100% - var(--gap)) -
0最危险：不能写--offset: 0，得写--offset: 0px或--offset: 0rem - 乘除运算有硬约束：右侧操作数必须是纯数字，如
calc(var(--width) * 2)合法，但calc(var(--width) * 2px)报错 - PostCSS 不会自动展开
calc(var(--x))，postcss-custom-properties默认只处理顶层var()，嵌套引用原样保留
IE10–11 拒识混合单位，必须靠层叠 fallback
IE10–11 支持 calc()，但只认同类型单位：px + px、% + % 可以；100vw - 20px 会被整个忽略——不是计算错，是压根不解析。
- 唯一可靠方案：先写 IE 安全的静态值，再写现代声明，利用层叠覆盖：
width: 960px;width: calc(100vw - 40px); - 顺序不能颠倒：IE 遇到不认识的值（含
vw的calc()）直接跳过后续同名声明 - 不要用
@supports (width: calc(100vw))包裹——IE11 根本不支持该@supports查询 - 涉及
height、padding等属性，同样要单独为每个属性设 fallback
父容器高度未设，100% 就是 0
calc(100% - 60px) 看似合理，但若父元素 height 是 auto 或未定义，那这个 100% 就没基准，结果是 0 - 60px = -60px，浏览器直接忽略该声明。
- 常见于 Vue/React 组件中：
.content设了height: calc(100vh - 80px)，但父级.layout没设height: 100% - 验证方式：打开 DevTools → Computed 标签页，看该元素的
height是否为具体像素值；不是，就逆向查html → body → 直接父容器 - 更健壮写法优先用视口单位：
height: calc(100vh - 80px)，但需确认是否符合布局意图
真正容易被忽略的是：你以为在调 calc() 的格式，其实问题出在变量定义、预处理器插值、父容器尺寸链、甚至 PostCSS 插件配置上——这些点各自合规，但组合起来照样失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
