根本原因是IE11及Safari 12–14等旧浏览器完全不识别var(--x)语法，整条CSS声明被静默丢弃，连后备值都不执行；必须前置静态值、显式配置PostCSS插件并设preserve:false，变量须定义在:root且为纯常量。
CSS变量在部分浏览器中无法解析，根本原因不是“不兼容”，而是那些浏览器压根不认识var(--x)这个语法——整条CSS声明被静默丢弃，连后备值都不走。
IE11及更早版本直接跳过var()整条声明
IE11遇到color: var(--primary, #007bff);，不会尝试解析括号内容，也不会回退到#007bff，而是直接忽略这行规则。结果是文字变黑、背景透明、边框消失，控制台无报错，DevTools里也看不到该属性被应用。
-
preserve: false是postcss-custom-properties的硬性要求：设成true或不配，输出里仍保留var()，IE照样失效 - 变量必须定义在
:root，且值为纯字符串（如--primary: #007bff;），含calc()或嵌套var(--base)的写法会被插件跳过 -
postcss-preset-env默认不启用custom-properties，必须显式配置features: { 'custom-properties': true }
Safari 12–14把var()当无效语法整条丢弃
和IE一样，Safari 12–14不进解析流程，var(--x, #fff)里的后备值完全没机会触发。它也不支持@supports (--x: red)这类检测，但能识别@supports (color: var(--_))。
- 唯一可靠写法是前置静态值 +
@supports包裹变量：先写background: #007bff;，再用@supports (background: var(--bg)) { background: var(--bg); } - 顺序不能反，否则老Safari看到空规则块，样式直接丢失
-
postcss-custom-properties对calc(100% - var(--gap))无能为力——IE/Safari连calc()本身都拒绝解析含var()的表达式
变量没加载或作用域不对导致“找不到”
不是浏览器问题，而是变量根本没进CSSOM。常见于路径错误、变量定义在局部选择器却全局引用、或JS动态设置但构建时不可见。
- 检查Network面板确认变量CSS文件返回状态码是
200，不是404或403 -
:root { --color: red; }才能被所有后代元素访问；.card { --pad: 1rem; }只对.card及其子元素生效 - DevTools Elements面板点
，在Styles里搜--color，确认它是否真实出现在:root声明块中
最容易被忽略的是：所有降级方案（PostCSS或polyfill）都只处理静态可求值的变量。JS运行时通过document.documentElement.style.setProperty('--x', 'y')设置的值，构建工具看不见，css-vars-ponyfill虽能处理，但需watch: true且确保CSS已加载完毕——真机验证比本地模拟重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
