ie8及更早版本不识别rgba()，整行声明被静默丢弃，导致背景消失；必须前置十六进制兜底色（如#000），再写rgba()覆盖，并配合filter:gradient滤镜模拟透明，且需严格换算透明度、统一start/end色值、避免haslayout引发布局异常。
因为旧浏览器（尤其是 IE8 及更早版本）压根不识别 rgba() 函数，整条声明会被静默丢弃——不是“透明度没生效”，而是背景色直接消失或回退到父级/默认色。
IE8 及更早版本会跳过整行 rgba() 声明
IE8 的 CSS 解析器遇到不认识的函数就直接跳过该整条规则，background-color: rgba(0, 0, 0, 0.5) 在它眼里等于没写。结果往往是背景变透明、文字发虚、遮罩层失效，甚至整个区块“看不见”。这不是渲染异常，是语法未实现。
- 必须在同一选择器内，先写一个 IE 能识别的兜底色，比如
background-color: #000000或background-color: rgb(0, 0, 0) - 再写
background-color: rgba(0, 0, 0, 0.5)，让现代浏览器覆盖前一行 - 不能只靠
filter补救：没兜底色时，filter即使生效，元素也可能因无背景而塌陷或错位
filter: progid:DXImageTransform.Microsoft.gradient 不是渐变，是“冒充”透明
IE8 没有原生 alpha 支持，只能借 gradient 滤镜模拟单色半透。但它的行为和语义完全偏离本意：
-
startColorstr和endColorstr必须完全一致，否则会出现色带（如写成#7f000000和#80000000就不行） - 透明度换算必须严格：alpha = 0.5 → 0.5 × 255 = 127.5 → 取整得 127 → 十六进制是
7F，不是80或4C - RGB 部分必须是 6 位十六进制，
rgb(51, 102, 153)对应#336699，不能简写为#369 - 这个滤镜会强制触发
hasLayout，可能让元素高度塌陷、边距错乱，尤其影响position: fixed遮罩层的滚动表现
IE9 是兼容性分水岭，但常被兼容模式拖垮
IE9 原生支持 rgba()，但若页面没加 <meta http-equiv="X-UA-Compatible" content="IE=edge">，它很可能降级运行在 IE7 或 IE8 兼容模式下——此时 rgba() 照样失效。
-
@supports (color: rgba(0,0,0,0))在 IE8/9 中完全不解析，写了也白搭 - 别信 autoprefixer：它早已停止自动注入 IE
filter，老项目必须手写两遍 - SCSS 编译时若用插值生成
#RRGGBBAA（如#{rgba($c, $a)}），IE11 会直接忽略整条声明，必须确保输出的是四参数rgba(r,g,b,a)
真正容易被忽略的，是兜底色顺序、meta 强制引擎标签、以及 filter 触发 hasLayout 后对盒模型的隐式影响——这三处一漏，问题就不是“不够透明”，而是“背景彻底没了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
