IE 背景 RGB 漏洞

使用 RGBa 进行渐进式增强越来越受欢迎，这很棒。 即使在一年前，它也几乎 准备好了。 处理渐进式增强部分的一个好方法是在 RGBa 值之前声明一个回退颜色，这样不支持它的旧浏览器将获得一个纯色版本

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}

以上方法可以正常工作，但是 Dan Beam 提醒我，在 IE 6 和 7 中（在 IE 8 中修复）存在一个有趣的漏洞/怪癖。 查看示例。

情况是，**仅当使用简写时，RGB 回退颜色才有效**。 如果您要像这样声明回退颜色

div {
	background-color: rgb(255,0,0);
	background-color: rgba(255,0,0,0.5);
}

使用background-color属性，它将失败并且根本不会显示任何背景颜色。

解决方案

使用 RGB 作为回退很好。 这是一件轻而易举的事，因为您只需复制 RGBa 值，删除“a”并删除第四个（不透明度）参数。 如果您想继续使用 RGB 作为回退，请记住使用简写（如果可能），或使用常规 HEX 代码或关键字设置回退。

在 示例 中，50% 红色的结果无论如何都是浅红色，因此使用十六进制代码来指定该值可能更适合作为回退颜色。

div {
  background-color: #fd7e7e;
  background-color: rgba(255,0,0,0.5);
}