跨浏览器的CSS线性渐变格式问题 [英] CSS Linear-gradient formatting issue accross different browsers

问题描述

我的任务是将主题应用于网站，并且给我指定的主题在css文件中具有我以前从未遇到过的奇怪语法.

I've been tasked with applying a theme to a website and the theme I have been given has some strange syntax in the css file that I haven't encountered before.

主题在Firefox和Chrome上正常运行，但是在IE上遇到了问题.特别是在水平放置于整个网页的div栏时，几乎透明了，并看到了一些对象.但是，在Firefox或IE上不会发生这种情况.

The theme is working fine on Firefox and Chrome but on IE is where I have experienced problems. In particularly with a div bar that lies horizontally accross the web page becoming almost transparent with some objects seen through it. This doesn't happen on Firefox or IE though.

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

When I investigated the page source I found the div had the following styling options. -moz-linear-gradient and -webkit-gradient so I initially thought that wsa the problem.

#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);.

I discovered through http://www.w3schools.com/css/css3_gradients.asp that these background values are assigned to Firefox and Chrome and figured that as the IE browser I'm using should be liner-gradient compatible I added the following line 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网页不受这些更改的影响.

This has not resolved the issue though, it seems the IE web page has been unaffected by these changes.

推荐答案

将属性从background更改为background-image并将top参数设置为'to-bottom'可以达到目的

Changing the property from background to background-image and the top argument to 'to-bottom' did the trick

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

这篇关于跨浏览器的CSS线性渐变格式问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！