ie8及以下不支持opacity，必须用filter: alpha(opacity=xx)（xx为0–100整数），且需zoom: 1触发haslayout；推荐封装less混合宏.opacity(@value)，自动处理0–1与0–100双格式输入，并并列输出opacity和filter，opacity前置。
IE 8及以下不支持opacity，必须用filter
Less里写透明度，opacity在IE 8–就失效，这时候得补filter: alpha(opacity=XX)。但直接手写容易漏、难维护，尤其多人协作时，有人写filter: Alpha(Opacity=50)（首字母大写）、有人漏分号、有人混用progid:DXImageTransform.Microsoft.Alpha全写法——结果IE下要么不生效，要么触发渲染bug。
所以核心不是“能不能写”，而是“怎么封装才不踩坑”：
-
alpha(opacity=XX)是唯一稳定写法，大小写敏感，Alpha或ALPHA在某些IE版本会忽略 - 必须加
zoom: 1触发IE的hasLayout，否则filter可能不渲染 - 要同时输出
opacity和filter，且opacity必须在前，否则IE会覆盖掉标准属性 - 值范围是0–100，不是0–1，传参时得
@value * 100转换
封装一个兼容IE的透明度混合宏
直接定义.opacity(@value)混合宏，内部按需输出两套规则：
.opacity(@value) when (@value >= 0) and (@value == 0) and (@value = 1) {
// 防误传：如果传了100以内的整数，自动当作IE风格处理，但依然补opacity
opacity: @value / 100;
filter: ~"alpha(opacity=@{value})";
zoom: 1;
}
这样调用就简单：.opacity(0.6) 或 .opacity(60) 都能工作。注意~""是Less字符串转义，避免编译器把@{value*100}当成变量名解析失败。
为什么不能只靠autoprefixer
autoprefixer对opacity不加filter补丁——它只处理带前缀的标准属性（如-webkit-transform），而filter: alpha()是IE私有语法，不属于CSS规范，autoprefixer明确跳过。所以依赖构建工具自动补全这条路在IE场景走不通。
常见错误是写了opacity: 0.5，以为autoprefixer会帮加filter，结果IE里完全不透明。必须手动或通过Less混合宏控制。
实际使用时容易漏掉的点
即使用了混合宏，仍可能出问题：
- 父元素没
position: relative时，IE下zoom: 1可能引发子元素定位偏移 - 动画中频繁修改透明度，IE 6–8的
filter重绘性能极差，卡顿明显，应避免在hover/transition里高频调用 - 如果项目已用PostCSS，别把Less的
.opacity()和PostCSS插件（如postcss-opacity）混用，后者同样不生成filter - Less 4.0+默认关闭
math模式，@value * 100可能报错，需确保配置math: always或改用unit(@value * 100, %)
IE的透明度从来不是加一行代码的事，是连带布局、性能、构建链路一起验证的活儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
