calc()在低版本浏览器不生效主因是整条css声明被静默丢弃，而非浏览器不支持；头号原因是加减号两侧缺空格，如calc(100%-20px)在ie11、safari≤15.3、firefox
calc() 在低版本浏览器不生效，几乎从来不是“浏览器不支持”，而是整条 CSS 声明被静默丢弃——你写的 width: calc(100% - 20px) 在 IE11 或 Android 4.4 里等于没写，连 fallback 都不会触发。
加减号两侧缺空格导致整条规则失效
这是跨浏览器失效的头号原因。旧引擎（IE11、Safari ≤15.3、Firefox calc(100%-20px) 当作非法 token 直接跳过，DevTools 里该属性灰掉、Computed 值保持初始值，且无任何提示。
-
calc(100% - 20px)✅ 所有主流环境都认 -
calc(100%-20px)❌ Firefox/Safari/IE11 静默丢弃 -
calc(100% -20px)❌ 减号后缺空格，同样失效 - Sass 中别写
calc(100% - $gap)，必须用calc(100% - #{$gap})，且$gap必须含单位（如$gap: 20px） - Less 中必须用
~"calc(100% - @{gap})"，否则它会把-当作算术运算符提前计算
Android 4.4 WebView 等极旧环境必须手动层叠 fallback
Chromium 30（Android 4.4 WebView）只认最简形式：calc() 里混用单位（% + rem）、嵌套括号、除法、var() 全部被丢弃。PostCSS 或 Sass 无法自动降级，只能靠 CSS 层叠机制硬编码 fallback。
- 固定值必须写在前，
calc()写在后：width: 288px; width: calc(100% - 2rem); - 如果设计稿基准是
1rem = 16px，fallback 就得是288px（即18rem × 16px），不能靠 Sass 算calc(100% - #{$base-font-size * 2})——那只是静态 px，失去响应性 - 别指望
@supports (width: calc(0px))检测：它只确认关键字存在，对空格缺失、单位错误、嵌套等真实失效场景完全无感 - 真要兜底检测，用 JS：
CSS.supports('color', 'var(--_)')，失败时给加no-cssvars类，再写.no-cssvars .card { width: 80%; }
变量未带单位或 0 缺单位引发静默崩溃
var(--gap) 返回的是原始字符串，不是“带单位的数”。如果定义是 --gap: 20，calc(100% - var(--gap)) 实际变成 calc(100% - 20)，类型不匹配 → 整条声明被丢弃。移动端尤其敏感。
- 自定义属性定义时必须带单位：
--gap: 20px✅，--gap: 20❌ -
0在calc()中不是数字，是“无类型占位符”：calc(0px + 100vw)✅，calc(0 + 100vw)❌ - 嵌套
calc(calc())在 Safari 15.4 前全挂，应拆解为两步：--inner: calc(100% - 40px); width: calc(var(--inner) / 3); - PostCSS 的
postcss-custom-properties默认不展开calc(var(--x))，必须设preserve: false并确保变量在:root定义，否则构建产物里仍残留var()，老浏览器照样跳过
最容易被忽略的不是语法写错，而是失效时毫无提示——布局突然不对，第一反应不该是“逻辑错了”，而是打开 DevTools 看那条声明是不是标着 Invalid property value，再逐字检查空格、单位、嵌套层级和构建输出里有没有残留的 var() 或未展开的 calc()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
