rgba() 的颜色 IE 后备不起作用

Question

为什么 IE color: red; 的以下后备不起作用？
在 IE7 中，颜色为黑色，而不是红色。
现场演示

HTML：

<div>
    <span>Hello</span>
</div>

CSS：

div {
    width: 200px;
    height: 100px;
    background-color: blue;
    text-align: center;
}
span {
    font-size: 2em;
    color: red;
    color: rgba(250, 250, 97, 0.9);
}

第 3 方编辑

mozilla mdn on css color 列出了 color: value 的不同选项

• CSS 2 规范：颜色：<值> 值可以是关键字 red 或 rgb(255,0,0)
• CSS 颜色模块级别 3（建议 2017-12）添加了 SVG 颜色、rgba()、hsl() 和 hsla() 函数，例如： rgba(0,0,0,0)

Answer 1

IE 不支持 RGBA。

但是，当它看到您的 color: 样式时，它会尝试对其进行评估并恢复为默认颜色 (#00000000)。
您可以在这里使用特定于IE的技巧，例如

*color: red;

但是，假设您试图仅影响背景颜色，而不是整个元素的不透明度，那么您最好使用一个过滤器将所需的 rgba 值设置为渐变的开始和结束颜色 - 创建 rgba 背景。

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);

-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);

但请记住 - IE 假定 Alpha 是第一个，而不是最后一个，所以不要只是转换和复制您的值。
双滤镜分别适用于 IE6 和 IE7。

http://css-tricks.com/rgba-browser-support/

Answer 2

将这两个颜色声明拆分为单独的 CSS 规则集可以解决此问题：

span {
    font-size: 2em;
    color: red;
}
span {
    color: rgba(250, 250, 97, 0.9);
}

现在 IE 获得红色文本，更好的浏览器获得 RGBA 声明。