IE11支持rgba()但不支持#RRGGBBAA简写和--双连字符类名;rgba必须用四参数完整写法,类名需改用单下划线或无连字符,避免opacity影响子元素。

IE11 支持 rgba(),但不支持带 alpha 通道的十六进制简写(如 #273166d5),也不识别双连字符类名(如 --dark)——这两点常导致背景色“消失”或 fallback 失效。
IE11 中 rgba() 能用,但写法必须严格
IE11 原生支持 rgba(0, 0, 0, 0.6) 这类完整四参数写法,但会直接忽略 background-color: #273166d5 这种 CSS 颜色简写。如果你在 SCSS 中用了变量插值生成这种格式(比如 #{rgba($color, $alpha)}),编译后可能输出无效值。
- ✅ 正确:
background-color: rgba(39, 49, 102, 0.835); - ❌ 错误:
background-color: #273166d5;(IE11 完全无视该声明) - ⚠️ 注意:
rgba()第四个参数不能省略,rgba(208,10,36)在 IE 中会被当作无效语法,渲染为透明或默认色
双连字符类名(--dark)在 IE11 中不生效
IE11 不解析 BEM 的双连字符命名约定,&.--dark 编译后生成的 .skills_column.--dark 在 IE11 下完全不匹配,导致 background-color 规则被跳过。
- ✅ 改用单下划线:
&._dark→ 编译为.skills_column._dark - ✅ 或去掉连字符:
&.dark→ 更稳妥 - ⚠️ 不要依赖
@supports (color: rgba(0,0,0,0))做条件判断——IE11 忽略整个@supports块,里面规则不会执行
透明背景需避免父级 opacity 影响子元素
IE11 支持 opacity,但它会让整个元素及其子节点一起变透明。如果只是想让背景半透而文字不透明,必须用 background-color: rgba(...),而不是给容器设 opacity: 0.3。
立即学习“前端免费学习笔记(深入)”;
- ✅ 正确:
background-color: rgba(0, 0, 0, 0.3); - ❌ 错误:
opacity: 0.3;(子元素文字也会变淡) - ⚠️ 若仍需兼容 IE8/9,才需加
filter和-ms-filter,但 IE11 完全不需要——加了反而可能触发渲染异常
真正容易被忽略的是:IE11 对 CSS 自定义属性(--primary)、现代选择器(:is())、以及某些 SCSS 插值语法极其敏感。哪怕只是类名里多了一个短横,背景色就可能彻底不渲染——不是“没效果”,而是规则压根没被加载。


















