IE8及以下不支持opacity，需用filter: alpha(opacity=50)实现半透明，值为0–100整数；现代浏览器用opacity: 0.5，两者应并列声明、互不干扰，避免混用导致失效或渲染异常。
IE8及以下不支持opacity，必须用filter: alpha
现代浏览器用opacity: 0.5就能搞定半透明，但IE8及更早版本压根不认识这个属性。它只认filter: alpha(opacity=50)——注意单位是0–100的整数，不是0–1的小数。
常见错误现象：opacity: 0.5在IE8里完全无效，元素看起来像没加样式；或者写了filter但忘了关掉IE的“兼容性视图”，导致样式被忽略。
-
filter只对有布局（hasLayout）的元素生效，IE7/8下常需加zoom: 1或position: relative -
filter会触发IE的私有渲染路径，可能影响子元素的z-index层级，尤其在弹窗、下拉等叠加场景中容易错位 - 不要写
filter: alpha(opacity=50); opacity: 0.5在同一个规则里还加!important——IE8会优先读filter，但后续覆盖逻辑混乱，反而让透明度失效
如何安全地同时支持IE和现代浏览器
关键不是“混用”，而是“条件性降级”：现代浏览器走opacity，IE走filter，两者互不干扰。
使用场景：写CSS时直接并列声明，靠浏览器自身解析能力过滤掉不识别的属性，不需要JS判断或条件注释（除非要支持IE6–7且页面已用CSS hack）。
立即学习“前端免费学习笔记（深入）”；
示例：
button {
opacity: 0.6;
filter: alpha(opacity=60);
}
- 顺序无所谓，但建议把
opacity放前面——方便维护者一眼看到标准写法 - 值必须严格对应：
opacity=0.6↔alpha(opacity=60)，小数点错一位就会差10% - 如果用了CSS预处理器（如Sass），别用
@if $ie之类逻辑去分支生成——容易漏掉动态修改透明度的JS逻辑，后期难同步
filter: alpha的副作用比想象中多
它不只是改透明度，还会强制开启IE的专有滤镜渲染引擎，带来一连串连锁反应。
性能影响：开启filter的元素无法被GPU加速，滚动或动画时帧率明显下降，尤其在IE8低配机器上卡顿感强。
兼容性坑：
- 与
transform（如rotate）共存时，IE9+可能崩溃或渲染异常，IE8直接忽略transform - 背景图+
filter组合下，IE8会把背景图也变灰（类似加了灰度滤镜），不是单纯透明 -
filter会让:hover伪类在IE7下失效，必须给父元素加hasLayout才能修复
现在还要不要为IE写filter？
取决于你的真实用户数据。如果统计显示仍有超2%的访问来自IE8及以下，那就得留着；否则删掉filter行，能省下维护成本、避免意外副作用。
最容易被忽略的一点：很多团队以为“加了filter就兼容IE了”，结果上线后发现IE8下按钮点击区域偏移、文字模糊、或和jQuery UI组件冲突——问题往往不出在透明度本身，而在filter触发的渲染链路变更。
