ie8及更早版本完全不解析rgba()，会静默丢弃整条声明；必须先写十六进制兜底色（如#000），再写rgba()覆盖，且不可仅依赖filter补全。
IE8 及更早版本压根不解析 rgba()，不是写法错，是 CSS 解析器根本没实现这个函数。它会直接丢弃整条声明，背景变透明或回退到默认色——你看到的“没效果”，其实是被静默忽略了。
IE8 对 rgba() 的解析行为是彻底失效
现代浏览器把 rgba(0, 0, 0, 0.5) 当作一个完整颜色值；IE8 则把它当无效语法，连带后面的声明（比如 background-color）整个跳过。这不是“透明度不生效”，而是“整条规则不执行”。
- 必须先写兜底色：
background-color: #000000（IE8 能认） - 再写覆盖层：
background-color: rgba(0, 0, 0, 0.5)（现代浏览器覆盖前一行） - 不能只靠加
filter就完事——没兜底色，IE8 连背景都没有
filter: progid:DXImageTransform.Microsoft.gradient 是借壳用的
这个滤镜本意是做线性渐变，但 IE8 下没有其他原生 alpha 支持，只能拿它“冒充”单色透明。
-
startColorstr和endColorstr必须完全相同，否则会出现意外色带 - 透明度换算不能靠心算：alpha × 255 后截断取整再转十六进制（不四舍五入），例如
0.33 → 54，不是硬编码4C - 十六进制颜色部分必须是 6 位，不足补零（如
rgb(51, 102, 153) → #336699） -
startColorstr和endColorstr字母大小写要统一（推荐全大写），IE8 对大小写敏感
filter 会强制触发 hasLayout，影响盒模型
IE8 的 filter 不只是视觉效果，它会改变渲染上下文。
- 可能引发高度塌陷、莫名边距、
position: fixed失效等布局问题 - 如果用了绝对定位遮罩层，务必在 IE8 下实测滚动行为——很多“背景不随滚动”的问题根源就在这儿
- 别混用
filter: alpha(opacity=50)和gradient，叠加会导致颜色异常甚至全黑
子元素继承透明度是 IE6–IE8 的设计行为，不是 bug
filter: alpha(opacity=50) 会让整个元素及其所有后代强制继承透明度，哪怕你给子元素写了 opacity: 1 或 filter: none 也没用。
- 试图用
zoom: 1或position: relative“隔离”透明度——无效 - 唯一有效解法：给关键子元素显式声明纯色
background-color（如#fff），抵消灰度感 - 若原背景是图片或渐变，需换为纯色 + 适当 padding 留白，否则边缘会露底
真正容易被忽略的是：IE8 下的 filter 不仅改颜色，还改布局逻辑；而 rgba() 在它眼里根本不存在——不是兼容性差，是压根不认识。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
