IE11及更早版本完全不解析var()语法，整条CSS声明被静默丢弃；需前置静态值、postcss-custom-properties设preserve:false、变量定义在:root且为纯常量，calc()中用var()在IE中仍无效。
IE11 及更早版本根本不解析 var(--x) 语法，整条 CSS 声明被静默丢弃——不是 fallback 没触发，而是浏览器连括号都没读进去。你看到按钮变黑、背景透明、边框消失，不是代码写错，是那行 CSS 根本没进渲染流水线。
为什么 var(--x, #fff) 在 IE 里完全无效
IE 的 CSS 解析器遇到 var() 函数就直接跳过整条声明，不会尝试提取逗号后的后备值。它不理解这个语法，也不做任何降级处理。
-
color: var(--text, #333);→ IE 当作空声明，取继承值（常为黑色）或initial - 正确兜底必须是前置静态值：
color: #333; color: var(--text, #333);（顺序不能反） - 后备值本身不能是另一个
var()、initial或空字符串 —— IE 连这些语义都不认
PostCSS postcss-custom-properties 必须设 preserve: false
默认配置下插件只“追加”降级值，比如把 background: var(--bg); 编译成：
background: #f8f9fa; background: var(--bg);
IE 看到第二行就跳过，最终还是用回退逻辑（常为空）。只有 preserve: false 才会删掉含 var() 的行，只留静态值。
立即学习“前端免费学习笔记（深入）”；
- 漏配或写成
preserve: true→ 构建后 CSS 里仍有var(--x)，IE 继续失效 - Webpack/Vite 中插件必须在
autoprefixer之前运行，否则可能被覆盖 - 变量定义必须在
:root，且值为纯常量：--color: red;✅，--size: calc(1rem + 2px);❌
calc() 里套 var() 是双重失效点
width: calc(100% - var(--gap)); 在 IE 中不是“变量没替换”，而是整个 calc() 表达式被 parser 直接拒掉 —— IE9+ 的 calc() 实现极脆弱，不接受空格、单位混合、或任何函数嵌套。
-
postcss-custom-properties默认不处理calc(var(--x))，因为它无法安全求值 - 即使配合
postcss-calc，也需严格控制插件顺序和配置，实践中极易断裂 - 稳妥做法：把
--gap: 16px改为--gap: 16（无单位），然后手动写width: calc(100% - 16px); - 若
--gap需响应式变化，就得放弃 IE11 的calc()支持，改用 JS 注入style.width
运行时 polyfill 如 css-vars-ponyfill 的关键限制
它能在 IE 中运行时替换 var()，但有硬性前提：
- 只扫描
:root和<style>/<link>已加载的 CSS —— 动态插入的样式需手动调用cssVars()重处理 -
watch: true必须开启，否则document.documentElement.style.setProperty('--x', 'red')不会触发更新 - 脚本不能放在
<head>同步执行，必须等DOMContentLoaded或</body>前；否则扫不到尚未加载的 CSS - 它不修复
calc()语法缺陷 —— 即使var()被替换成16px，IE 仍可能拒掉calc(100% - 16px)
真正容易被忽略的是：所有方案都依赖变量定义的“可静态求值性”。一旦你把 --primary 写在组件选择器里、用 JS 动态注入、或在媒体查询中定义再跨作用域引用，PostCSS 就看不见，css-vars-ponyfill 也默认不处理 —— 最终产出的 CSS 里依然躺着未替换的 var(--x)，IE 照样白屏。
