ie8及更早版本不支持rgba()，需用filter: alpha(opacity=50)兜底；filter只作用于块级元素且影响整个元素透明度，而rgba仅作用于颜色通道，二者机制不同，不可互换。
IE8及更早版本不支持rgba()，必须用filter降级
IE8及以下根本解析不了rgba(0, 0, 0, 0.5)，会直接忽略整条样式声明，导致背景或文字“突然不透明”。这时候得靠IE私有filter兜底：filter: alpha(opacity=50)（注意是0–100的整数，不是0–1的小数）。
常见错误是只写rgba，没加filter，结果在XP+IE8环境里颜色完全实心；或者把opacity=0.5写成小数，IE直接失效。
-
filter只对块级元素生效，行内元素（如<span></span>）需加display: inline-block或zoom: 1触发hasLayout -
filter会影响子元素整体透明度，而rgba只作用于单个颜色通道——这是语义本质区别，不能简单互换 - IE9开始支持
rgba，但默认可能跑在IE7/8兼容模式下，务必确认<meta http-equiv="X-UA-Compatible" content="IE=edge">
rgba()在Chrome/Firefox/Safari中行为一致，但alpha值为0时渲染有细微差异
现代浏览器都支持rgba，但alpha=0时：Chrome和Firefox会完全剔除该颜色（相当于transparent），Safari（尤其旧版）偶尔保留微弱色相残留，尤其在字体抗锯齿开启时。
这不是bug，而是各引擎对“完全透明像素”的合成策略不同。实际影响不大，但如果你在做精确的视觉对比（比如深色背景上叠加半透黑遮罩），建议统一用rgba(0,0,0,0.01)代替rgba(0,0,0,0)来规避。
- alpha值推荐用两位小数（如
0.45），避免0.45000000000000007这类浮点误差导致CSS重排 - 不要用
rgba()去模拟opacity效果——前者只改颜色，后者影响整个元素及其子树 - 如果背景是渐变+透明，
rgba可能和background-blend-mode冲突，优先测Safari
PostCSS自动补全filter已不可靠，手动维护更稳
像autoprefixer这类工具早在2017年就移除了对filter: alpha()的自动补全，因为IE8市占率归零。现在用它只会漏掉IE8兼容逻辑。
如果你项目仍需支持IE8，别依赖构建工具生成filter，老老实实手写，并放在rgba之后（CSS层叠顺序决定最终生效项）：
button {
background-color: rgba(0, 0, 0, 0.3);
filter: alpha(opacity=30);
}
- 重复写两遍样式不优雅，但比运行时出Bug强；可抽成SCSS mixin，但编译后仍是静态双写
- 注意
filter不支持RGBA中的任意通道单独透明（比如只让红色通道半透），这是能力边界 - 若用CSS-in-JS（如Emotion），需显式判断UA或用
@supports隔离，但IE8不支持@supports，只能靠外部条件加载
rgba和filter不只是“多写一行”的事——它们作用机制完全不同，一个在颜色模型层，一个在渲染合成层。很多人调完rgba觉得没问题，切到IE8才发现整个UI灰蒙蒙的，就是因为忘了filter会把文字、边框、阴影全拖进透明通道里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
