CSS-градиенты в IE 8+ работают во всех частях сайта, кроме одной

Question

При тестировании совместимости браузера для сайта, который я сейчас разрабатываю, я обнаружил, что CSS-градиенты работают нормально во всех частях сайта, кроме навигационных ссылок в IE 8 и IE 9.

I 'м, используя для этого свойство фильтра. HTML структура навигации -

<ul id="nav"><li><a>Some Name</a></li></ul>

, а CSS для элемента -

#nav li a
{
background: rgb(191,82,0);
background: -moz-linear-gradient(top, rgb(191,82,0) 0%, rgb(124,51,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(191,82,0)), color-stop(100%,rgb(124,51,0)));
background: -webkit-linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%);
background: -o-linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%);
background: -ms-linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf5200', endColorstr='#7c3300',GradientType=0 );
background: linear-gradient(top, rgb(191,82,0) 0%,rgb(124,51,0) 100%);
position: relative;
height: 1.3em;
padding: 0.2em 2em 0.1em 2em;
color: #FFF;
font-size: 0.9em;
font-family: FertigoProRegular;
text-transform: uppercase;
border-radius: 1em;
box-shadow: 0em 0em 0.5em #aaa;
border-bottom: 3px solid #5C2600;
}

Я попытался назначить определенныйИдентифицируйте ссылки навигации, а затем примените к ним CSS.Но это не сработало.Я знаю, что PIE и другие подобные элементы поведения HTC будут работать.Но я хочу знать, почему он не работает только в этой области.

Сначала я подумал, что это проблема, которая возникает со всеми элементами <a>.Но это было не так, поскольку градиенты отлично отображались на других элементах <a> на сайте.Проблема ограничена навигационными ссылками.

Любая помощь приветствуется.

Answer 1

Ваш код в порядке.Только что попробовал в моем IE8.Единственная проблема - твои цвета.Если вы измените начальный или конечный цвет вашего filter, вы увидите разницу;

Если вы измените свой фильтр на:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf5200', endColorstr='#7c33ee',GradientType=0 );

См. В действии http://jsbin.com/icenuk

Вы увидите, что код работает на самом деле.Это Ultimate CSS-генератор или IE DXImageTransform проблема с градиентом, заключающаяся в том, что они не производят тот же градиент, что и стандартный CSS-градиент.Возможно, вам придется изменить цвета вручную в фильтре, чтобы получить то, что вы хотите.Или вы можете использовать другой генератор градиента, такой как this :

Answer 2

когда я делаю меню градиента, я всегда использую Ultimate CSS Gradient Generator

Выводит старый формат непрозрачности Internet Explorer (да, это будет работать даже с IE6!