“Invalid at computed-value time”指CSS引擎计算最终样式值时因值非法或类型不匹配而静默丢弃声明，如color: var(--missing)、width: calc(100% - 20)、margin: var(--gap, 1rem)中--gap为空字符串等场景。
什么是“Invalid at computed-value time”
这不是浏览器报错，而是 CSS 引擎在计算最终样式值时，发现某个属性的值无法合法解析或类型不匹配，于是静默丢弃整条声明。你不会看到控制台报错，但样式就是不生效——color: var(--missing)、width: calc(100% - 20)、margin: var(--gap, 1rem)中--gap被设为空字符串，都可能触发它。
查 computed-value 无效最直接的路径
别盯着 Styles 面板看原始 CSS 声明，那只是“你写了什么”；要看 Computed 面板里“浏览器最终算出来的是什么”。重点检查三类值：
-
getComputedStyle(el).getPropertyValue('--x')返回空字符串 ≠ 未定义，可能是显式赋了空值（el.style.setProperty('--x', '')） -
getComputedStyle(el).color如果和你写的color: var(--c, red)不一致，说明--c被认为“已定义但无效”，fallback 没触发 - 对
calc()类型错误，Computed 面板里对应属性（如width）直接显示为invalid value或干脆不出现该条目
var() 在 computed-value time 失效的三大典型场景
var() 不是变量求值，而是字符串替换 + 类型校验。一旦中间环节出问题，整条就断：
-
--size: 12缺单位 → 替换后变成width: calc(100% - 12)，数字与百分比不能运算，直接 invalid -
width: calc(100% -var(--x))中-var连写 → 解析器把-var当作文本标识符，不是减号，整条声明语法非法 -
background-color: var(--theme, #000)，但--theme被设为initial或unset→ 这些是有效 CSS 值，不是“未定义”，所以 fallback 不触发
真正容易被忽略的是链式失效
一个 calc() 同时含 var(--x)（缺单位）+ 除法右侧带单位（/ 20px）+ 运算符没空格（100%-20px），在 Chrome 82 里连 Styles 面板都看不到这条声明——它压根没被解析进样式规则树。此时查 computed-value 已无意义，得先回退到语法层：用 CSS Linter 或手动拆解 var() 和 calc() 的展开结果，逐段验证是否符合类型规则。
