问题
Why the following fallback for IE color: red;
does not work ?
In IE7, the color is black
rather than 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);
}
3rd party edit
The mozilla mdn on css color lists the different options for color: value
- CSS 2 specification:
color: <value>
and value can be a keywordred
orrgb(255,0,0)
- CSS Color Module Level 3 (Recommendation 2017-12) added SVG colors, the rgba(), hsl(), and hsla() functions for example:
rgba(0,0,0,0)
回答1:
RGBA is not supported in IE.
However, as it sees your color: style, it attempts to evaluate it and reverts to the default color (#00000000). You could use an IE specific hack here, such as
*color: red;
But, assuming that you are trying to affect only the background color, and not the opacity of the entire element, you're best off with a filter that sets the desired rgba value as the start and end color of a gradient - creating an rgba background.
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
But remember - IE assumes that the Alpha is first, not last, so don't just convert and copy your values. The double filter is for IE6 and IE7 respectively.
http://css-tricks.com/rgba-browser-support/
回答2:
Splitting those two color declarations into separate CSS rulesets cures this problem:
span {
font-size: 2em;
color: red;
}
span {
color: rgba(250, 250, 97, 0.9);
}
Now IE gets red text, better browsers get the RGBA declaration.
来源:https://stackoverflow.com/questions/3236364/color-ie-fallback-for-rgba-does-not-work