为什么CSS3的透明颜色在IE浏览器中失效？

IE8及更早版本完全不解析rgba()，会静默丢弃整条声明；必须先写十六进制兜底色（如#000），再写rgba()覆盖，且不可仅依赖filter补全。

IE8 及更早版本压根不解析 rgba()，不是写法错，是 CSS 解析器根本没实现这个函数。它会直接丢弃整条声明，背景变透明或回退到默认色——你看到的“没效果”，其实是被静默忽略了。

IE8 对 rgba() 的解析行为是彻底失效

现代浏览器把 rgba(0, 0, 0, 0.5) 当作一个完整颜色值；IE8 则把它当无效语法，连带后面的声明（比如 background-color）整个跳过。这不是“透明度不生效”，而是“整条规则不执行”。

1. 必须先写兜底色：background-color: #000000（IE8 能认）
2. 再写覆盖层：background-color: rgba(0, 0, 0, 0.5)（现代浏览器覆盖前一行）
3. 不能只靠加 filter 就完事——没兜底色，IE8 连背景都没有

filter: progid:DXImageTransform.Microsoft.gradient 是借壳用的

这个滤镜本意是做线性渐变，但 IE8 下没有其他原生 alpha 支持，只能拿它“冒充”单色透明。

1. startColorstr 和 endColorstr 必须完全相同，否则会出现意外色带
2. 透明度换算不能靠心算：alpha × 255 后截断取整再转十六进制（不四舍五入），例如 0.33 → 54，不是硬编码 4C
3. 十六进制颜色部分必须是 6 位，不足补零（如 rgb(51, 102, 153) → #336699）
4. startColorstr 和 endColorstr 字母大小写要统一（推荐全大写），IE8 对大小写敏感

filter 会强制触发 hasLayout，影响盒模型

IE8 的 filter 不只是视觉效果，它会改变渲染上下文。

1. 可能引发高度塌陷、莫名边距、position: fixed 失效等布局问题
2. 如果用了绝对定位遮罩层，务必在 IE8 下实测滚动行为——很多“背景不随滚动”的问题根源就在这儿
3. 别混用 filter: alpha(opacity=50) 和 gradient，叠加会导致颜色异常甚至全黑

子元素继承透明度是 IE6–IE8 的设计行为，不是 bug

filter: alpha(opacity=50) 会让整个元素及其所有后代强制继承透明度，哪怕你给子元素写了 opacity: 1 或 filter: none 也没用。

1. 试图用 zoom: 1 或 position: relative “隔离”透明度——无效
2. 唯一有效解法：给关键子元素显式声明纯色 background-color（如 #fff），抵消灰度感
3. 若原背景是图片或渐变，需换为纯色 + 适当 padding 留白，否则边缘会露底

真正容易被忽略的是：IE8 下的 filter 不仅改颜色，还改布局逻辑；而 rgba() 在它眼里根本不存在——不是兼容性差，是压根不认识。