internet-explorer - Internet Explorer 8 中的 CSS 渐变

Question

代码在这里：http: //jsfiddle.net/xEULj/

#rt-header {
width: 600px;
z-index: 2;
position: relative;

background: -webkit-linear-gradient(left, red, red 40%, green 40%, green);
background: -moz-linear-gradient(left, red, red 40%, green 40%, green);
background: -o-linear-gradient(left, red, red 40%, green 40%, green);
background: -ms-linear-gradient(left, red, red 40%, green 40%, green);
background: linear-gradient(left, red, red 40%, green 40%, green);
}

有没有办法在 IE 中实现这一点？一些我还没有找到的解决方法？我实际上刚刚发现这在 IE10 中不起作用，我认为它会来自这里：http: //ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html，但我猜不是。

有什么想法，还是我只需要使用图像？

Answer 1

下面有 IE10 支持，渐变从绿色到红色。

检查这个演示

#rt-header
        {
    background: #ff3232; /* Old browsers */
    background: -moz-linear-gradient(left, #ff3232 1%, #ff2828 49%, #3fff30 49%, #3fff00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,#ff3232), color-stop(49%,#ff2828), color-stop(49%,#3fff30), color-stop(100%,#3fff00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* IE10+ */
    background: linear-gradient(to right, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#3fff00',GradientType=1 ); /* IE6-9 */
        }

Answer 2

我相信您可能需要使用 to 关键字。

尝试背景：线性渐变（向右，红色，红色 40%，绿色 40%，绿色）；

Answer 3

您可以使用伪元素用纯色填充元素的给定部分：

#rt-header {
    width: 600px;
    z-index: 2;
    position: relative;
    background: green;
}

#rt-header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: red;
    z-index: -1;
}

编辑小提琴

应该在 IE8 中工作（用 netrenderer.com 测试）。