Работают ли градиенты CSS в IE9?

К сожалению, у меня пока нет машины, на которой я мог бы протестировать IE9 (все еще в XP), и браузерные снимки все еще не поддерживают IE9. Может ли кто-нибудь сказать мне, поддерживает ли IE9 градиенты CSS? Вот страница, на которой применены градиенты. Это работает?

http://www.webdesignerwall.com/demo/css3-dropdown-menu/css-gradient-dropdown.html


gradient css internet-explorer internet-explorer-9
person David    schedule 17.02.2011    source источник

Ответы (4)


arrow_upward
6
arrow_downward

Это не.

См. здесь: http://caniuse.com/#search=gradient

Тем не менее, он будет поддерживать SVG в качестве фона, который в настоящее время используется для создания градиентов для Opera.

person kapa    schedule 17.02.2011
comment
хорошо, это не работает, но как мы можем использовать SVG для элемента в HTML? SVG совершенно новый для меня. - person David; 17.02.2011
comment
@David: проверьте это: stackoverflow.com/questions/4084614/ - person kapa; 17.02.2011
comment
Обратите внимание, что Opera поддерживает линейные градиенты, начиная с версии 11.10: dev.opera.com/ статьи/представление/css3-линейные градиенты - person Merijn; 23.08.2011

arrow_upward
3
arrow_downward

В настоящее время в IE9 отсутствует поддержка градиента CSS3. Тем не менее, вот хорошее обходное решение, использующее PHP для возврата SVG (вертикального линейного) градиента вместо этого, что позволяет нам сохранить наш дизайн в наших таблицах стилей.

<?

header('Content-type: image/svg+xml; charset=utf-8');
echo '<?xml version="1.0"?>
';

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" preserveAspectRatio="none" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
            <stop offset="0%" stop-color="#<?=$from_stop?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?=$to_stop?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" style="fill: url(#linear-gradient);"/>
</svg>

Просто загрузите его на свой сервер и вызовите URL следующим образом:

gradient.php?from=f00&to=00f

Это можно использовать в сочетании с вашими градиентами CSS3 следующим образом:

.my-color {
    background-color: #f00;
    background-image: url(gradient.php?from=f00&to=00f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background-image: -webkit-linear-gradient(top, #f00, #00f);
    background-image: -moz-linear-gradient(top, #f00, #00f);
    background-image: linear-gradient(top, #f00, #00f);
}

Если вам нужно настроить таргетинг ниже IE9, вы все равно можете использовать старый проприетарный метод «фильтра»:

.ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

Конечно, вы можете изменить код PHP, чтобы добавить больше точек градиента или сделать его более сложным (радиальные градиенты, прозрачность и т. д.), но это отлично подходит для простых (вертикальных) линейных градиентов.

person neave    schedule 15.03.2011
comment
Спасибо... вот моя версия .NET: [blog.marcovalsecchi.it/2011/03/ [1]: blog.marcovalsecchi.it/2011/03/ - person valse; 23.03.2011

arrow_upward
1
arrow_downward

Согласно этой статье, IE9 не поддерживает градиенты.

person Rhapsody    schedule 17.02.2011

arrow_upward
1
arrow_downward

IE9 не поддерживает градиенты CSS.

Посмотрите на нижнюю часть сравнения между Firefox 4 и IE9< /а>.

person Kriem    schedule 17.02.2011