CSS 跨不同浏览器的线性渐变格式问题

Question

我的任务是将主题应用到一个网站，我得到的主题在 css 文件中有一些我以前从未遇到过的奇怪语法。

主题在 Firefox 和 Chrome 上运行良好，但在 IE 上我遇到了问题。特别是水平横跨网页的 div 栏变得几乎透明，透过它可以看到一些对象。不过，这不会发生在 Firefox 或 IE 上。

当我调查页面源代码时，我发现 div 具有以下样式选项。 -moz-linear-gradient 和 -webkit-gradient 所以我最初认为是问题所在。

#aqua_bar_bottom {
        position:fixed;
        bottom:0; right:0; left:0;
        height:33px;
        overflow:hidden;
        background:-moz-linear-gradient(top, #CBCBCB, #A7A7A7);
        background:-webkit-gradient(linear, left top, left bottom,
            from(#CBCBCB),
            to(#A7A7A7)
        );
        border-top:1px solid #515151;
        z-index:102;
}

我通过 http://www.w3schools.com/css/css3_gradients.asp 发现这些背景值被分配给 Firefox 和 Chrome 并认为我使用的 IE 浏览器应该是线性渐变兼容的我添加了以下行 background:linear-gradient(top, #CBCBCB, #A7A7A7);.

#aqua_bar_bottom {
        position:fixed;
        bottom:0; right:0; left:0;
        height:33px;
        overflow:hidden;
        background:-moz-linear-gradient(top, #CBCBCB, #A7A7A7);
        background:-webkit-gradient(linear, left top, left bottom,
            from(#CBCBCB),
            to(#A7A7A7)
        );
        background:linear-gradient(top, #CBCBCB, #A7A7A7);
        border-top:1px solid #515151;
        z-index:102;
}

虽然这并没有解决问题，但 IE 网页似乎并未受到这些更改的影响。

Answer 1

你想要：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#a7a7a7',GradientType=0 );

这适用于 IE6-9。

10+应该认识：

background: linear-gradient(top, #cbcbcb 0%,#a7a7a7 100%);

Answer 2

将属性从 background 更改为 background-image 并将 top 参数更改为 'to-bottom' 就成功了

background-image:linear-gradient(to bottom, #CBCBCB 0%, #A7A7A7 100%);

CSS 跨不同浏览器的线性渐变格式问题

CSS Linear-gradient formatting issue accross different browsers

css

linear-gradients