ie11不支持css变量等新特性，需静态替换（如postcss-custom-properties）、双写flexbox声明、js模拟sticky，并避免css-vars-ponyfill等高开销方案。
CSS 本身没有 polyfill —— 所有“CSS polyfill”都是用 JS 模拟行为，不是给语法加兼容。IE11 不支持 CSS 变量、gap、sticky、:has() 等特性，光靠引入一个脚本无法自动生效，必须明确知道补什么、怎么补、补到哪一步。
IE11 不支持 CSS 自定义属性（--color-primary）怎么办
IE11 完全忽略 --* 声明，连 fallback 都不触发，var(--color-primary, #007bff) 直接被跳过。这不是样式没加载，是解析器压根不认这个语法。
- 构建时静态替换：用
postcss-custom-properties把color: var(--color-primary)编译成color: #007bff，前提是变量值全部静态、不可运行时变更 - 关键路径禁用 CSS 变量：按钮色、表单边框、字体大小等主干样式，直接写死值；仅在 JS 检测到支持后才用
document.documentElement.style.setProperty()覆盖 - 别用
CSS.supports('property', '--foo')做降级判断——IE11 不支持这个 API，会直接报错中断执行
IE10–IE11 的 Flexbox 渲染错乱必须双写声明
IE10–11 实现的是 2012 年草案（display: -ms-flexbox），和现代标准差异大：不支持 gap、flex-wrap: wrap-reverse，flex: 1 常失效，justify-content: space-between 也经常不生效。
- 必须同时写两套：
display: flex和display: -ms-flexbox；justify-content: center对应-ms-flex-pack: center -
flex: 1在 IE 下大概率无效，改用-ms-flex: 1；若子项有固定宽高，加min-width: 0/min-height: 0防止溢出 -
gap别硬上，用margin或嵌套容器模拟；align-content: stretch默认行为不同，需显式设-ms-flex-line-pack: stretch
想让 position: sticky 在 IE11 工作，得用 JS 模拟
IE11 原生不支持 position: sticky，Prefixfree 或 Autoprefixer 加前缀完全无效——这不是属性名问题，是整个定位机制缺失。
- 可用
fixed-sticky这类轻量库：监听scroll，动态计算元素距视口顶部距离，用position: fixed+top模拟粘性效果 - 注意滚动节流：不加防抖/节流会导致频繁重排，IE11 下卡顿明显；推荐用
requestIdleCallback（IE 不支持，得 fallback 到setTimeout） - 避免在复杂布局中嵌套使用：JS 模拟无法精确复现原生 sticky 的层叠上下文和容器边界逻辑，多层 sticky 容易错位
别碰 css-vars-ponyfill 这类运行时注入方案
它会在页面加载后遍历全部 DOM，把 :root 中的 --* 注入内联 <style></style>，看似“自动生效”，但代价极高。
- 每次调用都触发全量 DOM 遍历 + 样式重写，页面节点超 500 个时，IE11 下可能卡死 300ms 以上
- 只对静态变量有效，JS 动态修改
document.documentElement.style.setProperty('--x', 'red')后，它不会重新解析 - 与某些 UI 库（如早期版本的 Bootstrap 4）的样式注入逻辑冲突，导致重复
<style></style>标签或覆盖失效
真正难的不是加 polyfill，而是判断哪些 CSS 特性值得补、哪些该直接降级为传统布局。比如 :has() 在 IE11 中毫无替代方案，不如改用 JS 控制 class；aspect-ratio 也没可靠 polyfill，老浏览器就用 padding-top 百分比模拟。补得越深，维护成本越高，而用户感知往往并不明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
