旧浏览器中calc()失效主因是整条声明被静默丢弃，而非效果打折；头号原因是加减号两侧缺空格，如calc(100%-20px)在ie11、safari≤15.3、firefox
旧浏览器（IE11、Android 4.4 WebView、Safari ≤15.3）对 calc() 的支持不是“效果打折”，而是整条 CSS 声明被静默丢弃——你写的 width: calc(100% - 20px) 在 IE11 里等同于没写，不会 fallback 到任何值，背景/尺寸/间距直接塌陷。
加减号缺空格是跨浏览器失效的头号原因
几乎所有旧引擎（Firefox 早于 57、Safari ≤15.3、IE11）要求 + 和 - 两侧必须有空格，否则直接跳过整条规则。Chrome 虽可能宽容补全，但不可依赖。
-
calc(100% - 20px)✅ 所有现代及多数旧浏览器都认 -
calc(100%-20px)❌ Firefox/Safari 静默丢弃，IE11 无视 -
calc(100% -20px)❌ 减号后缺空格，同样失效 - Sass/Less 中拼接变量时极易漏空格：
calc(100% - #{$gap})比calc(100% - $gap)更安全
PostCSS 必须设 preserve: false 才能真正降级
postcss-custom-properties 默认只生成双声明（如 background: #007bff; background: var(--primary);），IE 看到第二行就跳过，最终取默认值（常为透明或继承色）。只有 preserve: false 才会移除 var()，只保留静态计算结果。
- 变量值必须是静态常量：
--gap: 20px✅，--gap: calc(1rem + 2px)❌（无法静态求值） - 变量必须定义在
:root或明确作用域内，组件级局部变量（如.btn { --pad: 1rem; }）需额外配置importFrom - 插件顺序必须在
autoprefixer之前，否则前缀处理可能干扰变量替换
别指望 @supports (width: calc(0px)) 检测兼容性
这个检测只能确认浏览器是否认识 calc() 关键字，完全无法识别语法错误（如空格缺失）、嵌套支持（calc(calc())）、单位混用（calc(100vh - env(safe-area-inset-bottom))）等真实失效场景。
- 真要兜底，得用 JS 检测：
CSS.supports('color', 'var(--_)')（注意不能写CSS.supports('--_')，IE 报错） - 检测失败时给
加no-cssvars类，再写.no-cssvars .card { width: 80%; } - 安全区适配等关键逻辑，必须加硬编码 fallback：
padding-bottom: 16px+calc(...)组合
最麻烦的不是语法写错，而是失效时毫无提示——布局突然不对，第一反应不该是“逻辑错了”，而是打开 DevTools 看那条声明是不是标着 Invalid property value，再逐字检查空格、单位、嵌套层级和构建输出里有没有残留的 var() 或未展开的 calc()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
