CSS3渐变不能在Firefox中工作 [英] CSS3 Gradient not working in Firefox

问题描述

由于某种原因，我的CSS渐变不能在Firefox（v10.0.1）中工作。页面的主要背景应该是一个渐变从白色从上到蓝色的颜色，但在Firefox，而不是一个平滑的渐变，我只是得到两个实心块的颜色，一个白色，一个蓝色。在Chrome和Safari（iPad和iPad）上，它可以完美地工作。

For some reason my CSS Gradient isn't working in Firefox (v10.0.1). The main background for the page is supposed to be a gradient from white at the top down to a blueish colour, but in Firefox instead of a smooth gradient I'm just getting two solid blocks of colour, one white, one blue. In Chrome and Safari (on iPad & iPhone) it works perfectly.

这里是页面的测试网址：

Here is the test url for the page:

http://testing.xenongroupadmin.com/bitesize/login.html

这里是我的CSS代码：

And here is my CSS code:

body  { font-family: arial, tahoma, verdana, sans-serif;
    background: linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
    background: -o-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
    background: -moz-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
    background: -webkit-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
    background: -ms-linear-gradient(bottom, #FFFFFF 42%, #CDEDFA 6%);
    background: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(0.42, #FFFFFF),
                    color-stop(0.06, #CDEDFA));


    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    width: 100%;
    min-width:1350px;
        }

我尝试过搜索一个答案，但似乎找不到

I've tried searching for an answer but can't seem to find an example which matches my current predicament.

感谢大家

推荐答案

这个...它的跨浏览器甚至在ie6中工作

try this... its cross browser even works in ie6

.bodyGradient {
    position: absolute; 
    top: 0; 
    left: 0; 
    border-top: 3px solid #93ae59; 
    z-index: -1;
    background: -moz-linear-gradient(top,  #cfddac,  #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#cfddac), to(#fff));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfddac', endColorstr='#ffffff');
    background: -o-linear-gradient(rgb(207,221,172),rgb(255,255,255));
}

这篇关于CSS3渐变不能在Firefox中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！