IE 8+中的CSS渐变可在网站的所有部分工作，但其中一个除外

Question

在测试我当前正在设计的网站的浏览器兼容性时，我发现CSS Gradients在该网站的所有部分都能正常工作，但IE 8和IE 9中的导航链接除外。

我为此使用'filter'属性。 导航的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;
}

我尝试为导航链接分配一个特定的ID，然后将CSS应用于它。 但这并没有解决。 我知道PIE和其他此类HTC行为元素会起作用。 但是我想知道为什么它不仅仅在那个领域起作用。

首先，我认为这是所有<a>元素都会出现的问题。 但是事实并非如此，因为“渐变”可以完美显示在网站上的其他<a>元素上。 问题仅限于导航链接。

任何帮助，将不胜感激。

Answer 1

当我做渐变菜单时，我总是使用Ultimate CSS Gradient Generator

输出较旧的Internet Explorer不透明格式（是的，甚至可以在IE6上使用！

Answer 2

您的代码正常。 刚刚在我的IE8中尝试过。 唯一的问题是您的颜色。 如果您更改filter开始或结束颜色，您将看到区别。

如果将过滤器更改为：

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

观看实战http://jsbin.com/icenuk

您将看到代码实际上正在工作。 这是Ultimate CSS生成器或IE DXImageTransform渐变问题，它们不会产生与标准CSS渐变相同的渐变。 您可能需要手动更改滤镜中的颜色以获得所需的颜色。 或者你可以使用另一个梯度发生器像这样 ：