IE11中CSS变量失效主因是css-vars-ponyfill仅扫描:root/:host定义的变量且执行过早；须将变量统一声明在:root、脚本置于</body>前或用DOMContentLoaded触发、禁用watch、配合PostCSS静态降级calc()。
IE11里CSS变量全失效，不是没加polyfill，是它根本没扫到你的CSS
css-vars-ponyfill 在 IE11 中静默失败的最常见原因：它只认 :root 和 :host 下定义的变量，而你把 --color 写在 .card 选择器里——插件直接跳过整段规则。同时，脚本若放在 <head> 里同步执行，document.styleSheets 还是空的，它连 <link> 里的 CSS 都没看见。
- 变量必须统一声明在
:root中：:root { --primary: #007bff; --gap: 16px; } -
<script>标签务必移至</body>前，或用DOMContentLoaded包裹调用 - Webpack/Vite 项目中，不要在模块顶层直接
import cssVars from 'css-vars-ponyfill'; cssVars();，应在onMounted（Vue）或useEffect(() => { cssVars() }, [])（React）中触发
calc(var(--x)) 在 IE11 里双重失效：替换完还是被丢弃
即使 css-vars-ponyfill 成功把 calc(100% - var(--gap)) 替换成 calc(100% - 16px)，IE11 的 calc 解析器仍会因空格或单位混合（如 16px）直接抛弃整条声明。这不是 polyfill 没干活，是 IE 自身 parser 的硬伤。
- 构建时降级更可靠：用 PostCSS +
postcss-custom-properties配合postcss-calc，确保calc()内变量被静态展开为纯数值 - 若变量需动态响应（如媒体查询切换），放弃 IE11 的
calc()支持，改用 JS 注入内联样式：el.style.width = `calc(100% - ${gap}px)` - 绝对禁止在
@media查询条件里用变量：@media (min-width: var(--sm))→ IE11 直接跳过整个媒体块
watch: true 在 IE11 中反而导致静默失败
启用 watch: true 本意是监听 JS 动态修改 document.documentElement.style.setProperty('--color', 'red')，但 IE11 不支持 DOMSubtreeModified，插件内部 fallback 机制又未覆盖该场景，结果是既没报错也没更新——页面卡在初始状态。
- 生产环境建议设
watch: false，仅在需要响应式变量变更时，手动触发：cssVars({ variables: { '--color': 'red' } }) - 避免与
onlyLegacy: true混用：IE11 不支持@supports，你写的@supports (color: var(--_)) { ... }在 IE 里压根不解析，polyfill 无从介入 - 加
onlyVars: true参数，跳过对非变量规则的遍历，显著降低 IE11 下的执行耗时
babel-polyfill 或 core-js 加载失败，常因入口配置错位
报错 Promises is not defined 或 Array.from is not a function，90% 不是 polyfill 缺失，而是加载时机早于框架初始化。比如 Vue 的 v-loading 依赖 Object.defineProperty 的 setter，若 polyfill 在 new Vue() 之后才注入，组件已按原生逻辑初始化完毕。
立即学习“前端免费学习笔记（深入）”；
- Webpack 项目：入口
entry必须写成["babel-polyfill", "./src/main.js"]，而非在main.js顶部import - Vite 项目：在
vite.config.ts的build.target设为"ie11"，并确保core-js通过useBuiltIns: "usage"按需注入 - 避免
import '@babel/polyfill'—— 它已被废弃，改用import 'core-js/stable'; import 'regenerator-runtime/runtime';
实际项目里最易被忽略的点：IE11 对 CSS 的容错极低，var(--x) 失效不是“颜色不对”，而是整条声明被浏览器静默丢弃；polyfill 不是万能胶，它只在严格满足前提时才起效——变量位置、执行时机、参数组合，缺一不可。
