Question

我一直在试图如何使用IE9的背景渐变来获得DIV的背景。有趣的是，除了这个之外，DIV的显示梯度的其余部分。

我正在使用的代码是：

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

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

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

修改

这就是我的#respond的样子（绝对正常）

#respond {
    -moz-box-shadow: 0 0 1px #CCCCCC;
    -webkit-box-shadow: 0 0 1px #CCCCCC;
    border-top: 1px solid #ECEDE8;
    float: left;
    margin-left: 10px;
    width: 370px;
    margin-bottom: 15px;
    background: -moz-linear-gradient(center bottom , #E8E8E8 0%, #F2F2F1 50%) repeat scroll 0 0 #F5F5F4;
    background: -webkit-gradient(linear, left top, left bottom, from(#E8E8E8), to(#f2F2F1)); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E8E8', endColorstr='#F2F2F1'); /* for IE */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E8E8', endColorstr='#F2F2F1'); /* for IE */

}

这就是.leaderboard的样子

.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;
}

Answer 1

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

HTML

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

CSS

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) */

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

我即将公布我的调查结果 - 这不属于这个问题的范围 - 但是如果有人在阅读这个问题需要他们给我一个DM /电子邮件（mail@ldexterldesign.co.uk）。

最佳，

Answer 2

你试过了吗？

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

报价是必要的。对于work in all versions of IE的内容，您需要将-ms-filter放在filter之前。

Answer 3

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

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

REF：

http://msdn.microsoft.com/en-us/library/ms532930%28v=vs.85%29.aspx

为什么我的div背景渐变不适用于IE9

3 个答案: