calc()在IE11/Safari≤15.3中失效主因是解析失败导致整条CSS声明被静默丢弃，而非计算错误；头号原因是加减号两侧缺空格，如calc(100%-20px)被跳过，而calc(100% - 20px)才兼容。
calc()在IE11/Safari≤15.3中整条声明被静默丢弃
不是“计算不准”，而是浏览器解析失败后直接跳过整条CSS规则——width: calc(100%-20px)在IE11里等于没写，DevTools中该属性会灰掉，Computed值回退到初始值，且无任何报错提示。
最常见原因是加减号两侧缺空格：calc(100% - 20px)✅ 全环境兼容；calc(100%-20px)❌ 所有旧引擎静默丢弃；calc(100%+20px)❌ 同样失效（+左侧必须空格）。
- 负数写法要区分：
calc(-50% + 10px)✅（负号属于数值，+前后仍需空格） - Sass中必须用插值：
calc(100% - #{$gap})，且$gap必须含单位（如$gap: 20px） - Less中必须转义：
calc(~"100% - @{gap}")，否则@gap会被提前算成纯数字
Android 4.4 WebView等极旧环境只认最简calc形式
Chromium 30（Android 4.4 WebView）对calc()支持极弱：混用单位（如% + rem）、嵌套括号、除法、var()全部被丢弃，连calc(100vw - 2rem)都会失效。
它唯一稳定识别的是形如calc(100% - 20px)的线性减法，且所有操作数必须是明确长度单位。
- 必须手动层叠fallback：
width: 288px; width: calc(100% - 2rem); - fallback值不能靠Sass算静态px：
calc(100% - #{$base-font-size * 2})输出的是固定像素，失去响应性 - 若设计稿基准是
1rem = 16px，则2rem对应32px，fallback就该写width: 32px（不是2rem）
变量未带单位或0缺单位导致类型不匹配
var(--gap)返回的是原始字符串，不是“带单位的数”。如果定义是--gap: 20，那么calc(100% - var(--gap))实际展开为calc(100% - 20)，类型不匹配 → 整条声明被丢弃。
移动端尤其敏感，因为WebKit旧版本对类型校验更严格。
- 自定义属性定义时必须带单位：
--gap: 20px✅，--gap: 20❌ -
0在calc()中不是数字，是“无类型占位符”：calc(0px + 100vw)✅，calc(0 + 100vw)❌ - 除法必须加括号：
calc((100% - 20px) / 3)✅，calc(100% - 20px / 3)❌（/优先级高，先算20px / 3）
父容器尺寸未定义导致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: 100%或固定值） - 更健壮写法：
height: calc(100dvh - 80px)，避开地址栏抖动和百分比依赖链
复杂点在于：空格缺失、单位缺失、预处理器插值错误这三者常同时出现，一旦漏查一项，fallback就起不到兜底作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
