Gradient не работает в firefox и IE

Question

Firefox 26.0 и IE 8 дают мне проблемы. Прекрасно работает в хроме. Застрял долгое время, кто-нибудь может мне помочь?

.sectionBoxTitle {

height: 40px; 
margin: 0px 0 60px 0; 
padding: 0; 
color: white; 
background: -moz-linear-gradient(100% 100% 90deg, ##0b4bbb, #007fe4); 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0b4bbb), to(#007fe4)) 

}

Answer 1

Это кросс-браузерное решение, которое должно вам помочь. Я думаю, что он охватывает большинство сценариев:

.sectionBoxTitle { 
    height: 40px; 
    margin: 0 0 60px 0; 
    padding: 0; 
    color: white; 

    /* For Browsers that do not support gradients */ 
    background-color: #0b4bbb; 
    /* Safari 4+, Chrome 1-9 */ 
    background: -webkit-gradient(linear,0% 0,0% 100%,from(#0b4bbb),to(#007fe4)); 
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */ 
    background: -webkit-linear-gradient(top,#0b4bbb,#007fe4); 
    /* Firefox 3.6+ */ 
    background: -moz-linear-gradient(top,#0b4bbb,#007fe4); 
    /* For IE 6,7,8,9 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b4bbb',endColorstr='#007fe4'); 
    /* IE 10+ */ 
    background: -ms-linear-gradient(top,#0b4bbb,#007fe4); 
    /* Opera 11.10+ */ 
    background: -o-linear-gradient(top,#0b4bbb,#007fe4); 
    /* CSS 3 Support */ 
    background: linear-gradient(to bottom,#0b4bbb 0,#007fe4 100%); 
} 

FIDDLE

Документация: CSS Tricks

Answer 2

Что вам понадобится следующее:

.sectionBoxTitle { 
    height: 40px; 
    margin: 0px 0 60px 0; 
    padding: 0; 
    color: white; 
    background: #0B4BBB; /* Old browsers */ 
    background: -moz-linear-gradient(top, #0B4BBB 0%, #007FE4 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0B4BBB), color-stop(100%, #007FE4)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #0B4BBB 0%,#007FE4 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #0B4BBB 0%,#007FE4 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #0B4BBB 0%,#007FE4 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #0B4BBB 0%,#007FE4 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b4bbb', endColorstr='#007fe4',GradientType=0); /* IE6-9 */ 
} 

Demo.

Вам понадобятся все эти префикс для браузера, который будет работать в каждом браузере. Просто указывая -moz-, а старый синтаксис для -webkit-, вероятно, используется для покрытия всех браузеров, которые будут поддерживать градиенты еще в 2010 году, но в настоящее время есть больше браузеров, которые его поддерживают, поэтому больше браузеров для добавления префиксов.

Этот код снят с http://www.colorzilla.com/gradient-editor/. Я только изменил формат цвета от rgba() до #HEX.