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);。< / p>

#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参数更改为＆＃39;更改为＆＃39;做了诀窍

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

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

2 个答案: