为什么CSS currentColor关键字在某些老旧安卓机型上失效？-css教程-PHP中文网

Android 4.4–6.0 WebView 完全不支持 currentColor，整条 CSS 规则被静默丢弃；内联 SVG 的 fill="currentColor" 被 XML 层拒绝回退为 black；伪元素需显式 color: inherit 才能继承，继承链断裂或 color 无效（如 transparent）亦导致失效。

为什么css currentcolor关键字在某些老旧安卓机型上失效？

因为老旧安卓机型（尤其是 Android 4.4–6.0）的 WebView 内核压根不识别 currentColor，整条 CSS 声明会被静默丢弃——不是“颜色没变”，是浏览器连解析都没做。

Android 4.4–6.0 的 WebView 完全不支持 `currentColor`

这些版本基于 Chromium 30–44，currentColor 关键字未被纳入语法解析器。遇到 border-color: currentColor 或 fill: currentColor，整条规则直接跳过，DevTools 里看不到警告，样式回退到初始值（比如边框消失、SVG 图标变黑）。

border: 1px solid currentColor 在 Android 4.4 中整条失效 → 必须拆成 border-width、border-style、border-color 单独写
box-shadow: 0 0 4px currentColor 同样被忽略 → 老 WebView 不支持该用法，得写两行 fallback
background-color: currentColor 在 Android 4.4–6.0 和 IE11 中均无效 → 这些环境根本不认这个组合

`fill="currentColor"` 在内联 SVG 中为何还是黑的？

不是语法错，而是 Android 4.4 WebView 对 HTML 属性值校验极严：fill="currentColor" 被当作非法字符串直接回退为 fill="black"。这不是 CSS 解析问题，是 XML 属性层面的拒绝。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

必须删掉所有内联 fill、stroke 属性（包括）
改用 CSS 控制：给父容器设 color，再写 svg path { fill: currentColor; }
和 background-image: url(icon.svg) 完全不可用 —— 上下文隔离，currentColor 连解析机会都没有

伪元素和继承链断裂才是真凶

90% 的“失效”其实和浏览器版本无关，而是 currentColor 根本没东西可取 —— 它读的是**本元素自身计算出的 color 值**，不是父级传下来的。如果父容器是或，UA 样式可能把 color 推断为 buttontext 或 canvastext，最终算出来是黑色或透明。

::before / ::after 默认不继承 color，它的 currentColor 永远是 black → 必须显式加 color: inherit
用了 display: contents 或 all: unset 会切断继承链 → currentColor 失效
调试时优先查 DevTools 的 Computed 面板，确认目标元素的 color 是否为有效值（不是 transparent 或 rgba(0,0,0,0)）