IE8及更早版本不支持rgba()、hsl()、hsla()和transparent，因其渲染引擎冻结在CSS2.1时代，遇未知颜色函数整行静默丢弃，必须前置十六进制等兼容值、后置现代值，依赖CSS层叠实现降级。
老浏览器对 rgba()、hsl()、hsla() 和 transparent 的支持不一致，根本原因是它们在 CSS3 规范落地前就已冻结渲染引擎，且厂商未统一实现路径——IE8 就是典型代表，它把颜色解析逻辑锁死在 CSS2.1 时代。
IE8 及更早版本直接忽略现代颜色函数
IE8 不认识 rgba() 和 hsl() 语法，遇到就整条声明丢弃，不会降级、不会报错，静默失效：
-
background-color: rgba(0, 0, 0, 0.5);→ IE8 当作无效，回退到父元素背景或默认透明（常表现为“看不见”） -
color: hsl(240, 100%, 50%);→ 整行被跳过，文本用继承色或浏览器默认色渲染 - 连
transparent都有问题：IE8 把它当黑色处理，不是真透明
十六进制简写和单位缺失在旧 Safari 中会失败
iOS 12–13 的 UIWebView 和部分 Android WebView 对语法容忍度极低，看似小问题却导致整条规则失效：
-
hsl(120, 70, 60)缺少%单位 → 被拒绝解析（Chrome/Firefox 会自动补，但旧 WebKit 不） -
#abc虽然合法，但在某些嵌入式浏览器里被误判为八进制前缀 → 建议统一用#aabbcc避免歧义 - 真正废弃的是八进制
rgb(012, 034, 056)—— Chrome 120+ 直接报CSS parsing error
命名颜色（如 coral）在老环境里数值不稳定
W3C 定义的命名色表虽固定，但 IE6–8 实现时有偏差，比如：
-
orange在 IE6 是rgb(255, 165, 0)，但某些定制内核把它映射成rgb(255, 150, 0) - 仅 16 个基础名（
aqua、black、blue等）在 IE8 全平台可靠，lightseagreen这类扩展名可能被当作无效值 - 团队协作中混用
darkslategray和#2F4F4F，Git diff 看不出语义是否一致，上线后才发现色差
降级必须靠声明顺序，不能靠 @supports
@supports 是 CSS3 特性，在 IE8–9 完全不识别，所以它对老浏览器毫无意义。唯一可靠方案是「先写兼容值，后覆盖现代值」：
- 正确写法：
button {<br> background-color: #007bff;<br> background-color: rgba(0, 123, 255, 0.8);<br>} - 错误写法：
@supports (background-color: rgba(0, 0, 0, 0.5)) {<br> button { background-color: rgba(0, 123, 255, 0.8); }<br>}→ IE8 直接跳过整个@supports块，没 fallback 就白屏 - 所有降级都得手动写两遍，CSS 层叠机制是老浏览器唯一能理解的“兼容层”
最麻烦的不是语法不支持，而是失效方式不可见——没有报错、没有警告，只有一块颜色突然不对。调试时得打开真实 IE8 虚拟机，用 DevTools 逐条检查 computed style 是否被应用，而不是依赖现代浏览器的模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
