ie11 不支持 css 自定义属性，需用 css-vars-ponyfill 降级处理，但必须确保变量定义在 :root、css 加载完毕后执行、禁用 watch、避免 calc() 和媒体查询中使用变量。
IE11 对 var(--x) 完全不解析，不是“部分失效”，而是整条 CSS 规则被丢弃——比如 .btn { color: var(--primary); } 在 IE11 里等同于 .btn { }。靠 @supports 或 fallback 写法（如 color: #007bff; color: var(--primary);）根本没用，必须用运行时补丁或构建时降级。
为什么直接引入 css-vars-ponyfill 常常没效果
最常见的情况是：控制台无报错，但 IE11 里所有颜色、间距全回退成浏览器默认值；检查元素发现 element.style 为空，内联样式没注入。
- 变量定义不在
:root里，而是在组件级选择器中（如.card { --pad: 1rem; }），css-vars-ponyfill默认只读:root和:host - CSS 文件还没加载完就执行了
cssVars()，插件扫描不到任何--*定义 - 用了 Webpack + CSS Modules，类名哈希化后，插件无法关联作用域，
var(--x)所在的规则压根不匹配 - 变量来自 JS 动态设置（
document.documentElement.style.setProperty('--color', 'red')），但没启用watch: true，IE11 下该事件实际被忽略，导致后续更新不触发重计算
正确初始化 css-vars-ponyfill 的关键配置
必须确保 polyfill 在所有 CSS 加载完毕后执行，且只处理它能真正覆盖的场景。
- 不要在
中同步调用cssVars()；改用DOMContentLoaded或load事件包裹 - 显式传入
onlyVars: true，避免遍历全部 CSS 规则，大幅减少 IE11 下的执行耗时 -
watch: false—— IE11 不支持DOMSubtreeModified，开启反而可能静默失败；若需响应 JS 动态变更，应手动调用cssVars({ variables: { '--color': 'red' } }) - 变量必须定义在
:root中：:root { --primary: #007bff; --gap: 8px; }，否则插件跳过
calc() + var() 在 IE11 中的双重失效问题
即使 css-vars-ponyfill 替换了 var(--gap)，结果变成 calc(100% - 16px)，IE11 仍会拒绝整条声明——它对 calc() 支持极弱，不允许空格外的任意字符，也不接受单位混写以外的复杂表达式。
- 避免在
calc()内直接写var(--x)；改用 PostCSS 构建时降级（postcss-custom-properties）提前展开 - 如果必须运行时处理，需配合
css-vars-ponyfill的onBeforeSend钩子，把calc(100% - var(--gap))改写为 IE 兼容格式（如calc(100% - 16px)），但注意这要求变量值必须是静态数字+单位 - 媒体查询里禁用变量：
@media (min-width: var(--sm))→ IE11 直接跳过整条@media，必须改用固定值
真正麻烦的不是“怎么加 polyfill”，而是变量来源是否可控、是否嵌套、是否参与 calc 或媒体查询——这些边界情况一旦出现，css-vars-ponyfill 就会静默放弃，而你很难从控制台发现原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
