渐变在Firefox和IE中不起作用

Question

Firefox 26.0和IE 8给了我一些问题。 在chrome中可以正常工作。 现在被困了很长时间，有人可以帮我吗？

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

小提琴

文档： CSS技巧

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 */
}

演示

您需要所有这些特定于浏览器的前缀，才能在每个浏览器中正常工作。 仅指定-moz-和-webkit-的旧语法可能会覆盖2010年支持梯度的所有浏览器，但是如今有更多支持它的浏览器，因此有更多浏览器为其添加前缀。

此代码直接从http://www.colorzilla.com/gradient-editor/获取 。 我只将颜色格式从rgba()更改为#HEX 。