旧版IE(IE6–IE8)不支持opacity,必须用filter:alpha(Opacity=XX)降级,参数需大写、整数0–100、无空格换行;该滤镜使子元素一同变淡,若仅需背景半透应改用gradient滤镜模拟rgba。

旧版IE(IE6–IE8)根本不识别 opacity 属性,直接跳过整条声明——写了等于没写。必须用 filter: alpha(opacity=XX) 手动降级,且参数、写法、触发条件都有硬性限制。
filter: alpha(opacity=XX) 的参数和写法陷阱
IE6–IE8 只认 filter: alpha(opacity=70) 这种格式,不是小写 opacity,也不是带百分号或小数:
• opacity 参数名首字母必须大写,写成 opacity=70 或 Opacity=70 都无效,只能是 Opacity=70
• 值必须是 0–100 的整数,Opacity=70.5、Opacity=70%、Opacity=0.7 全部被忽略
• filter: 和 alpha(...) 之间不能换行、不能有空格,尤其 IE6–7 对格式极其敏感
• 多个滤镜共存时(比如加了 gradient),alpha 必须放在最后,否则会被覆盖
为什么子元素也变透明?这不是 bug,是设计如此
filter: alpha() 作用于整个渲染节点,和标准 opacity 一样会创建局部层叠上下文,并向下继承——文字、图片、子容器全部跟着变淡。
• 如果你只想让背景半透而文字不透明,alpha 不适用,得换方案:用 progid:DXImageTransform.Microsoft.gradient 模拟 rgba 背景(如 startColorStr=#80000000)
• 若坚持用 alpha,需把文字抽离到兄弟元素并用 position: relative; z-index: 2 提升层级,但要注意 IE 的 stacking context 规则更苛刻
• 行内元素(如 <span>)默认不生效,必须显式设 display: inline-block 或 zoom: 1 触发 hasLayout
和现代语法共存时的顺序与 fallback 策略
现代写法必须写在 filter: alpha() 后面,否则 IE 会解析失败或覆盖:
• 正确顺序:filter: alpha(Opacity=70); opacity: 0.7;
• 错误顺序:opacity: 0.7; filter: alpha(Opacity=70);(部分 IE7 下可能失效)
• Autoprefixer、PostCSS 默认不生成 alpha,需手动启用 ie-css3 插件或写死降级
• 不要依赖“浏览器自动 fallback”——IE8 遇到不认识的 opacity: 0.7 就直接丢弃,不会尝试找下一条;所以降级声明必须前置且独立存在
立即学习“前端免费学习笔记(深入)”;
最易被忽略的一点:IE6–IE7 下,如果父容器没宽高、没浮动、也没触发 hasLayout,alpha 滤镜可能导致布局塌陷或定位偏移,建议统一加 zoom: 1 或 height: 1px 保底。


















