Question

为什么以下IE color: red;的后备不起作用？
在IE7中，颜色为black而不是red Live demo here

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);
}

第三方编辑

mozilla mdn on css color列出了color: value

的不同选项

CSS 2 specification：color: <value>和值可以是关键字red或rgb(255,0,0)
CSS Color Module Level 3（2017-12建议书）添加了SVG颜色，rgba（），hsl（）和hsla（）函数，例如：rgba(0,0,0,0)

Answer 1

IE中不支持RGBA。

然而，当它看到你的颜色：样式时，它会尝试评估它并恢复为默认颜色（＃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声明。

rgba（）的颜色IE回退不起作用

第三方编辑

2 个答案: