Css 为什么不是'；t我的div背景渐变在IE9中工作

我一直在绞尽脑汁研究如何使用IE9的背景渐变为一个DIV工作提供背景。有趣的是，除此之外，DIV的其他显示渐变

我使用的代码是：

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA')

为了更好地理解，我创建了一个名为Leadboard的div类，它位于屏幕的右上角，位置是固定的

除此之外，页面中具有渐变的其余元素都正确呈现。我做错什么了吗

编辑

这就是我的#回应看起来的样子（效果绝对不错）

这就是排行榜的样子

.leaderboard {
    border: 1px solid #5D9ABA;
    -moz-border-radius: 0px 0px 4px 4px;
    -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    margin: 375px auto;
    background: -moz-linear-gradient(center bottom , #388EBB 0%, #5D9ABA 50%) repeat scroll 0 0 #5D9ABA;
    background: -webkit-gradient(linear, left top, left bottom, from(#388EBB), to(#5D9ABA));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */
    text-color: #EFEFEF;
    -moz-box-shadow: -2px 2px 5px 0px #CCCCCC;
    -webkit-box-shadow: -2px 2px 5px 0px #CCCCCC;
    box-shadow: -2px 2px 5px 0px #CCCCCC;
}

您是否尝试过：

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA')"; /* for IE */

引用是必要的。此外，您还需要将

-ms过滤器

放在

过滤器

之前，IE使用#AARGGBB格式，一个8位数字。他使用的颜色只有6位数

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */

参考：

这很有效（请注意我对跨浏览器支持的评论！）：

HTML

PS如果你打算在IE7-9中结合边界半径、渐变和多个背景图像（在2011年8月3日的最新版本中），我只能说祝你好运（只花了5个小时来试验和记录用例！）

我将要发表我的发现-这超出了这个问题的范围-但是如果有人阅读这篇文章需要它们，请给我发一封DM/电子邮件(mail@ldexterldesign.co.uk)

---

最好，

您可以找到最近的链接：。但是，除了gradienttype属性之外，您的语法似乎是相同的。也许你的代码中的其他地方有错误或矛盾？我刚刚更新了我的原始问题和css代码。。#response的效果很好，但排行榜上没有。我想不出如何解决这个问题。如果你已经解决了这个问题，那么回答你的问题并接受它是个好主意，这样其他人就能知道什么对你有效。你关于IE7-9中不支持梯度和边界半径的P.s.对我来说是个很大的打击。天哪，我讨厌为IE开发！！！你是说他用的是6，微软的文件说应该是8。好主意！是的，很抱歉看起来伯爵不是我的强项。编辑它以使其正确，谢谢你的提醒。这对我来说在IE9：文档模式：IE8而不是模式IE9中有效…你知道为什么吗？@jryananty IE9删除了

-ms-

前缀，我相信。@jryananty正如我所说的，要在IE的所有版本中工作，你需要将-ms过滤器放在过滤器之前。

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */

<a class="gradient border-radius multiple-background" href="#">Anchor</a>
<div class="gradient border-radius multiple-background">Div</div>

a {
display:inline-block; /* NB ie7 ele requires display:block or display:inline-block for gradient to work on anchors */
}

a,
div {
min-height:1%; /* NB ie7 ele requires haslayout for gradient to work */
}

.gradient{
background: #f8cbd6; /* Old browsers */
background: -moz-linear-gradient(top, #f8cbd6 0%, #edeeec 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8cbd6), color-stop(100%,#edeeec)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* Opera11.10+ */
/* background: -ms-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8cbd6', endColorstr='#edeeec',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* W3C */
}
/* NOSUPPORT ie7-9 for gradient AND border-radius (border-radius only supported in ie9 anyway) */