ie8及以下不支持rgba()，需前置十六进制fallback色并人工换算视觉等效值；filter仅适用于块级背景，须用8位#aarrggbb格式且声明顺序严格；文字rgba无有效降级方案，现代项目应避免强制兼容。
IE8及以下完全忽略rgba()，必须提供十六进制fallback
IE8及更早版本的CSS解析器压根不识别rgba()函数，整条声明会被静默丢弃——不是渲染异常，是根本没读进去。结果常是背景变透明、文字变黑色或继承父级颜色，视觉上“突然失效”。这时候只写background-color: rgba(0, 0, 0, 0.5)毫无意义，必须在它前面（或同一声明块中靠前位置）显式声明一个IE能认的值：background-color: #808080。
关键点在于：fallback色不能随便选。比如rgba(0, 0, 0, 0.5)对应的是半透黑，但直接fallback成#000就太深，#fff又太浅。得人工换算成视觉等效的灰阶值，常用做法是取RGB通道均值再按alpha加权，例如rgba(100, 150, 200, 0.4)可fallback为#7a96c8（非简单截断，需校验）。
filter: progid:DXImageTransform.Microsoft.gradient不是万能补丁
这个滤镜只能模拟**块级元素**的背景半透明，且仅对background-color生效，对color、border-color完全无效。它要求startColorstr和endColorstr必须是8位十六进制格式（#AARRGGBB），前两位是alpha（如0.5→7F），后六位是目标RGB色（如rgba(255, 0, 0, 0.5)→#7FFF0000）。
常见错误：
-
filter写在background-color: #hex之前——IE8会先应用滤镜，再被纯色覆盖，白忙一场 - 用缩写色值如
#f00代替#ff0000——IE滤镜不认缩写，startColorstr='#7FF00'直接失效 - 给
<span></span>这类行内元素直接加filter——必须配合display: inline-block或zoom: 1触发hasLayout，否则静默不渲染
rgba()用于文字时，IE降级本质是放弃透明，而非模拟
别试图用filter让文字半透明——IE的filter对color属性无效。改用opacity？那整个元素（含子节点）都会变淡，在IE6–IE8还会引发z-index层级错乱。实际能做的只有两件事：
- 把文字颜色降级为低对比度灰阶，例如
color: rgba(0, 0, 0, 0.6)→color: #666 - 用PNG背景图替代文字（仅限静态文案，维护成本高）
没有“保持语义一致”的捷径。RGBA文字在IE里就是不可降级的，设计阶段就得接受这点。
现代项目还用filter？先确认是否真要支持IE8
Autoprefixer早在2017年就移除了filter: alpha()和gradient滤镜的自动补全，因为IE8全球市占率已趋近于零。如果你的项目仍需兼容，必须手写双声明：
button {
background-color: #4a90e2;
background-color: rgba(74, 144, 226, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4D4a90e2', endColorstr='#4D4a90e2', GradientType=0);
}
注意顺序不能错：background-color（十六进制）→background-color（rgba）→filter。IE8读第一行，忽略后两行；Chrome/Firefox/Safari忽略第一行，走第二行；IE9+忽略filter，走rgba。最容易漏的是IE7的hasLayout触发条件——父容器没设zoom: 1或height，filter可能完全不生效，调试时得开IE开发者工具看Computed值是否解析出#AARRGGBB。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
