Цвет IE fallback для rgba() не работает

Почему следующий резерв для IE color: red; не работает?
В IE7 цвет black, а не red.
Живая демонстрация здесь

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: color: <value> и значением может быть ключевое слово red или rgb(255,0,0)
Цветовой модуль CSS Level 3 (Рекомендация 2017-12) добавил цвета SVG, rgba(), hsl() и hsla (), например: rgba(0,0,0,0)

Ответ 1

RGBA не поддерживается в IE.

Однако, поскольку он видит ваш цвет: стиль, он пытается оценить его и возвращается к цвету по умолчанию (# 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/

Ответ 2

Разделение этих двух объявлений цвета на отдельные наборы правил CSS устраняет эту проблему:

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

Теперь IE получает красный текст, лучшие браузеры получают декларацию RGBA.