ie11中currentcolor在简写属性（如border）中会整条声明失效，因语法层面拒绝解析；安全fallback是先写具体颜色值再覆盖currentcolor，且需确保父容器显式声明color并作用于内联svg。
IE11 对 currentColor 的解析存在静默失效问题，不是“部分不支持”，而是某些组合下直接跳过整条声明——最稳妥的 fallback 是用具体颜色值覆盖。
IE11 中 currentColor 为什么会整条声明失效
IE11 在解析 border: 1px solid currentColor 这类简写时，一旦遇到无法识别的值（currentColor 在部分上下文中被当作无效 token），会直接丢弃整个声明，而不是降级为部分生效。这不是兼容性差，是语法层面拒绝解析。
-
border-color: currentColor单独写通常能工作（IE11 支持该属性+关键字） -
border: 1px solid currentColor在 IE11 中大概率被整条忽略 -
fill: currentColor在内联 SVG 中有概率生效，但若父元素 color 来自继承链中间某层（非 :root 或显式声明），IE11 可能取到初始值black - 伪元素如
::before默认不继承color，所以它的currentColor是black，除非你加了color: inherit
如何安全地 fallback 到具体颜色值
不能依赖 @supports (color: currentColor) —— IE11 根本不支持 @supports 规则，写了也白写。必须用构建时或运行时可执行的硬编码方案。
- 在 CSS 中手动写两遍：
border-color: #333; border-color: currentColor;，IE11 读到第二行就跳过，保留第一行 - 避免在同一个声明块里混用不同来源的颜色控制，比如不要写
box-shadow: 0 0 4px currentColor, 0 0 8px rgba(0,0,0,0.1);—— IE11 会整个box-shadow声明失效 - PostCSS 插件如
postcss-custom-properties无法处理currentColor，它只管var()；想自动化替换，得用postcss-current-color类插件，但注意它只能做静态映射（比如把所有currentColor替成#333），无法响应父级 color 变化 - 如果主题色由 JS 动态注入（如
document.documentElement.style.setProperty('--theme', '#25b864')），IE11 里就得同步写document.documentElement.style.color = '#25b864'，再让其他样式靠继承
SVG 图标中 fill: currentColor 的 IE11 特别处理
IE11 对内联 SVG 的 fill: currentColor 支持不稳定：有时取不到父级 color，有时取到但不响应变化。这不是缓存问题，是渲染树更新机制差异。
- 确保 SVG 是真正内联（即
<svg><path fill="currentColor"></path></svg>），不是<use href="icon.svg#x"></use>或<img> - 删掉 SVG 源码里所有硬编码的
fill、stroke属性（包括style="fill:red"），否则 IE11 会优先用它们 - 给 SVG 父容器加
color，同时对 SVG 元素显式写color: inherit（IE11 下伪元素和 SVG 子元素都不自动继承） - 底线方案：用 class 控制，比如
.icon--primary { fill: #007bff; }，配合.icon--dark { fill: #fff; }，完全绕开currentColor
最易被忽略的一点：IE11 不会因为你在 :root 设了 color，就让所有后代 SVG 自动拿到这个值——它必须是**可继承的、显式作用于 SVG 父容器的 color 声明**，且不能被更近的作用域覆盖。换句话说，currentColor 在 IE11 里不是“动态变量”，而是一次性快照，拍完就定格了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
