CSS3 Градиентная проблема в IE

Question

Почему этот градиент CSS 3 не работает в IE9.Он показывает только простой цвет фона, без градиента.Что-то не так с этим?Спасибо.

background: #999; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); 
background: -moz-linear-gradient(top,  #ccc,  #000);

Answer 1

IE9 на самом деле поддерживает градиенты?Я знаю, что он не поддерживает много CSS3.Вы можете попытаться просмотреть эту статью, в которой есть обходной путь для IE при использовании градиентов.

В отношении вашего кода вам также может понадобиться строка:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000')"; 

Или также добавьте GradientType=0 в строку фильтра.(С этого сайта)

Answer 2

Вот хорошее обходное решение, использующее 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, вы все равно можете использовать старый проприетарный метод 'filter':

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

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

Answer 3

Лучшее решение для градиентов в IE - использовать градиентное изображение и repeat-x.Поместите это на задний план и где вы хотите.Не все браузеры рисуют градиенты чисто, и они иногда исчезают, когда вы это делаете.

<table id="tabs_desc" cellpadding="0" cellspacing="0" width="100%"
  style="
    background:url('blue_gradient.png') transparent repeat-x;
    *background:url('blue_gradient_long.png') transparent repeat-y; /* Special for IE */
    width:  100%;
    background-size: contain;
    color:  #fff;
    padding: 10px;
    font-family:  Calibri;
    font-size:  11pt;
    font-weight:  bold;
    "
> ...

Надеюсь, это поможет!

Answer 4

У вас есть этот код:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

Я думаю, вы должны изменить это на:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCCFF, endColorstr=#000000FF);