ie8及更早版本不解析rgba()，整行声明被跳过，背景/文字“消失”而非半透，必须手写前置#rrggbb fallback并添加filter: alpha(opacity=xx)补全，工具不会自动处理。
直接结论：CSS2.1（即IE8及更早）不解析rgba()，整行声明会被跳过，背景/文字会“消失”而非“半透”，必须手写前置#rrggbb或rgb() fallback，并对IE8加filter: alpha(opacity=XX)补全——工具不会自动帮你做这事。
为什么rgba()在IE8里等于没写
CSS2.1解析器遇到不认识的函数名（如rgba()）会整行丢弃，不是降级，是彻底忽略。比如：background-color: rgba(0, 0, 0, 0.3)在IE8里等同于这行不存在，元素背景变成transparent或继承父级色，文字可能糊成一团。这不是渲染不准，是语法层面不识别。
- IE8及更早版本不支持
@supports，写@supports (color: rgba(0,0,0,0))也白搭 -
opacity属性虽被IE8支持，但它影响整个元素及子树，和rgba()只改颜色通道有本质区别 - PostCSS插件（包括autoprefixer）默认不补
filter，别信“开了polyfill就万事大吉”
安全 fallback 的写法顺序和格式
必须把兼容性高的声明写在前面，现代声明写在后面，靠CSS层叠覆盖。浏览器从上到下解析，老浏览器读到第一行就停，新浏览器继续往下走。
- 纯色背景：
background-color: #808080;→background-color: rgba(128, 128, 128, 0.5); - 带背景图：
background: #f0f0f0 url("bg.png") repeat;→background: rgba(240, 240, 240, 0.6) url("bg.png") repeat;（不能用background-color简写，否则会清掉url()） - 文字色带透明：
color: #4a5568;→color: rgba(74, 111, 165, 0.9);（不能用#rrggbbAA，IE全系无视） - 别用
hsla()当fallback——IE8连hsl()都不支持，写了也跳过
IE8专属补丁：filter: alpha(opacity=XX)怎么写才生效
这个滤镜不是可选配件，是IE8下让半透背景“重新出现”的唯一手段，但极易写错。
-
opacity值必须是0–100的整数，opacity=0.3或opacity=30%都无效 - 只对块级元素起作用，行内元素得加
display: inline-block或zoom: 1触发hasLayout - 必须和
background-color共存，单独写filter在某些文档模式下会失效 - 如果同时用了
background-image，filter会让图片也变淡，而rgba()不影响图片——这是设计取舍点，不是bug - 推荐搭配
meta标签：<meta http-equiv="X-UA-Compatible" content="IE=edge">，否则IE9可能退化成IE7内核
最容易被忽略的三个细节
项目上线后在XP机器上裂开，往往不是因为没写filter，而是这三个地方漏了一个：
-
filter和rgba()顺序写反了——filter必须在rgba()之前，否则IE8读不到 - 忘了
<meta http-equiv="X-UA-Compatible" content="IE=edge">，导致IE9跑在IE7兼容模式下，rgba()照样失效 - 把
filter加在行内元素（如<span></span>）上却没设display: inline-block，结果什么都没变
这些不是边缘case，是真实项目里高频出问题的位置。手动维护比依赖构建时转换更可控，尤其当你目标最低支持IE8时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
