chrome ≤83 中 calc() 静默失效：除法右侧、乘法两侧不能都带单位，±*/ 必须空格，变量需带单位且设 fallback。
calc() 在低版本 Chrome（≤83）里根本不会报错，它直接静默丢弃整条声明——你看到样式没生效，不是因为“报错”，而是浏览器压根没认出这行 CSS。
Chrome ≤83 不支持除法右侧带单位
这是最常踩的坑。低版本 Chrome 把 calc(100% / 20px) 当作非法语法，但错误不在你写的除法本身，而在除数带单位：/ 右侧必须是纯数字，不能是 20px 或 2rem。
-
calc(100% / 3)✅ 安全，所有旧版 Chrome 都认 -
calc(100% / var(--cols))✅ 只要--cols是纯数字（如3），没问题 -
calc(100% / 20px)❌ 解析失败，整条规则消失 -
calc(100% / calc(20px))❌ 嵌套calc()在旧引擎中不被识别
乘法两侧不能都带单位
Chrome ≤83 对乘法更保守：* 左右只要有一个带单位，另一个就必须是无单位数字。两个都带单位（比如 20px * 2em）会直接跳过整条声明。
-
calc(20px * 2)✅ 正确 -
calc(50% * 1.5)✅ 正确 -
calc(20px * 2em)❌ 无效，旧版 Chrome 不支持面积类运算 -
calc(100vw * 0.8)✅ 可以，0.8是合法系数（注意：Chrome 84+ 才开始稳定支持小数系数，≤83 建议用4/5这种分数写法）
空格缺失在旧引擎中更敏感
虽然所有浏览器都要求 + 和 - 两侧有空格，但在 Chrome ≤83 中，缺空格不仅导致失效，还可能引发连锁解析错误——比如影响后续同选择器下的其他声明。
-
calc(100%-20px)❌ 即使现代浏览器只划掉这一条，旧版可能让整个style块失效 -
calc(-50% + 10px)✅ 负号属于数值，+前后仍需空格 - 统一习惯：所有
+、-、*、/两侧都加空格，避免记忆混淆
变量插值必须 fallback 到静态值
旧版 Chrome 不支持运行时计算未定义的 CSS 变量。如果 --gap 没声明，calc(100% - var(--gap)) 整条会被忽略，连 fallback 都不触发。
- 必须写成：
calc(100% - var(--gap, 20px))✅ 提供默认单位值 -
--gap: 20❌ 缺单位，旧引擎无法推导类型，整个var()返回空字符串 -
--gap: 20px✅ 显式带单位，才能被旧版正确读取
真正容易被忽略的是：这些限制不是孤立存在的。比如你写了 calc((100% - var(--gap)) / var(--col-count))，一旦 --gap 缺单位或 --col-count 是字符串，整个表达式在 Chrome ≤83 中就彻底蒸发——连 DevTools 的 Styles 面板里都找不到它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
