IE8及更早版本不支持rgba()，整条声明被丢弃，需前置兼容写法如#000或rgb()，再覆盖rgba()；IE8需手动加filter: alpha(opacity=值)，且opacity为0–100整数、仅对块级元素生效；iOS 12 Safari在渐变中将rgba()渲染为黑块，应改用transparent或8位HEX；Chrome 6–12对rgba()空格和alpha格式敏感；alpha=0在旧Safari可能残留色相，建议用0.01替代。
IE8及更早版本直接忽略rgba()，必须降级写法
IE8及以下不解析rgba()语法，整条CSS声明会被丢弃，背景或文字会回退到透明或父容器色，不是变淡，是“突然实心”。这不是bug，是解析器层面的不支持。
正确做法是：在rgba()之前，先用兼容性无争议的写法声明颜色：
-
background-color: #000;或background-color: rgb(0, 0, 0);（IE6–8都认） - 再覆盖一层
background-color: rgba(0, 0, 0, 0.5); - 顺序不能反——CSS层叠规则决定了后写的生效，但IE8因不识别而跳过，自然回退到前一条
IE8需手动加filter: alpha()，autoprefixer已不生成
PostCSS生态早在2017年就移除了对filter: alpha(opacity=50)的自动补全。现在依赖构建工具“自动兼容”IE8，等于放弃兼容。
若项目仍需支持IE8，必须手写，并注意三点：
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
opacity值是0–100的整数，不是小数：filter: alpha(opacity=30);✅，filter: alpha(opacity=0.3);❌ -
filter只对块级元素生效，行内元素要加display: inline-block或zoom: 1 - 它作用于整个元素及其子树，和
rgba()只改颜色通道有本质区别，不能互换语义
iOS 12 Safari在渐变里解析rgba()会渲染成黑块
在linear-gradient()或radial-gradient()中写rgba(0,0,0,0.3)，iOS 12 Safari会直接画成纯黑，不是透明，也不是报错。
安全写法只有两个：
- 用
transparent代替，比如linear-gradient(to right, #000, transparent) - 用8位十六进制颜色
#0000004D（等价于rgba(0,0,0,0.3)），iOS 13+才支持，所以必须双写：-webkit-linear-gradient(...)+linear-gradient(...) - 别指望
@supports (background: rgba(0,0,0,0))能隔离——iOS 12根本不支持@supports
Chrome 6–12对rgba()空格敏感，alpha值别用百分比
旧版Chrome（尤其是Chrome 6–12）对rgba()参数格式极其挑剔：
- 逗号后不能有空格：
rgba(255,107,53,0.5)✅，rgba(255, 107, 53, 0.5)❌ - alpha只能是0–1的小数，
rgba(255,107,53,50%)在Chrome 13前非法 - 设计稿给的
#3a86ff+ 60%透明，别手算RGB再写rgba(58,134,255,0.6)——优先转成#3a86ff99，再fallback为数值严格对齐的rgba()
最常被忽略的是：alpha=0在Safari旧版可能残留微弱色相，尤其字体开启抗锯齿时。真要精确控制，用rgba(0,0,0,0.01)比rgba(0,0,0,0)更稳。
