CSS3 градиент не работает в Firefox

Question

По какой-то причине мой CSS-градиент не работает в Firefox (v10.0.1).Предполагается, что основным фоном для страницы будет градиент от белого сверху вниз до синеватого цвета, но в Firefox вместо плавного градиента я просто получаю два сплошных цветовых блока: один белый, один синий.В Chrome и Safari (на iPad и iPhone) он работает отлично.

Вот тестовый URL для страницы:

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

А вот мой код CSS:

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

Я пытался найти ответ, но не могу найти пример, который соответствует моему текущему затруднению.

Спасибо всем

Answer 1

попробуйте это ... его кросс-браузер даже работает в 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));
}

Answer 2

напишите это в вашем css

background-image: -moz-linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);

Лучший способ определить gradient для всех браузеров

body  { 
    background: linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
    background: -moz-linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
    background: -webkit-linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%);
        }

Answer 3

используйте «background-image» вместо «background», как в этом примере из http://gradients.glrzad.com/ background-image: -moz-linear-Gradient (снизу, # DBA803 13%, # FFCA1D 57%, # FFF33879%);