老浏览器不支持CSS自定义属性和Flexbox新标准，需用postcss-custom-properties静态替换变量、双写display/flex声明并适配-ms前缀，禁用css-vars-ponyfill及新版normalize.css。
老浏览器不支持CSS自定义属性（--color-primary）怎么办
根本没法用，IE11及更早版本、Android 4.4 WebView、iOS 8 Safari 都完全忽略 --* 声明，连 fallback 都不会触发。别指望 var(--color-primary, #007bff) 在这些环境里生效——解析器直接跳过整条规则。
实操建议：
- 用
postcss-custom-properties在构建时静态替换：把color: var(--color-primary)编译成color: #007bff，前提是所有变量值都是静态的（不能是运行时 JS 动态设置的） - 避免在关键路径（比如按钮默认色、表单边框）上依赖 CSS 变量；主色调、间距等可预设为固定值，再用 JS 检测支持后覆盖
- 别用
CSS.supports('property', '--foo')做运行时降级——IE11 不支持这个 API，会直接报错
Flexbox 在 IE10–IE11 中错位或换行异常
IE10–11 的 Flexbox 实现基于 2012 年草案（display: -ms-flexbox），和现代标准差异大：不支持 gap、flex-wrap: wrap-reverse、align-content: stretch 默认行为也不一致。
常见错误现象：子元素突然堆成一列、justify-content: space-between 失效、flex: 1 不占满剩余空间。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 必须同时写两套声明：
display: flex和display: -ms-flexbox；justify-content要对应写-ms-flex-pack（如justify-content: center→-ms-flex-pack: center） - IE 下
flex: 1常失效，改用-ms-flex: 1；若子项有固定宽高，加min-width: 0/min-height: 0防止溢出 - 避免在 IE 环境中用
gap，改用margin或嵌套容器模拟
要不要引入 css-vars-ponyfill 这类 polyfill
它能在运行时解析 :root 中的 --* 并注入内联 style，但只对静态变量有效，且性能开销明显——每次调用都遍历全部 DOM、重写所有匹配的 var()，页面越大越卡。
使用场景非常有限：仅适用于小页面、变量极少、且必须由 JS 动态更新主题色（比如夜间模式开关）的场景。
实操建议：
- 不要在 SPA 首屏加载时就执行，等用户触发主题切换再初始化
- 禁用其自动监听
DOMSubtreeModified（已废弃且性能差），改用手动调用apply() - 如果只是做主题切换，不如直接切换 class（如
body.theme-dark）+ 预编译多套 CSS，更稳更快
reset.css 或 normalize.css 在老浏览器里反而坏事
新版 normalize.css（v8+）已放弃 IE8 支持，部分规则（如 input[type="number"]::-webkit-inner-spin-button）在 IE 下会触发解析错误，导致后续样式表加载中断；某些重置会强行覆盖 IE 默认的表单控件样式，造成无法点击或尺寸错乱。
实操建议：
- 老项目用
normalize.cssv7.0.0（最后兼容 IE9 的版本），并删掉所有::-webkit-*伪元素规则 - IE 下禁用
box-sizing: border-box全局重置——IE8 对table和select的盒模型处理异常，会导致宽度计算崩溃 - 不如自己维护一个极简 reset：
* { margin: 0; padding: 0; }+ 针对img、button、input的显式vertical-align和font-size
真正麻烦的不是语法不支持，而是老浏览器对“支持”的定义和现在完全不同——它们把解析错误当沉默，把部分支持当全部可用。动手前先确认目标环境的真实 UA 和渲染引擎版本，比查兼容表管用得多。
