CSS Linear-gradient formatting issue accross different browsers

问题

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.

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.

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

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

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

回答1:

You want:

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

This works for IE6-9.

10+ should recognize:

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

回答2:

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%);

来源：https://stackoverflow.com/questions/34337760/css-linear-gradient-formatting-issue-accross-different-browsers

标签

css

linear-gradients