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年支持渐变的所有浏览器，但现在有更多支持它的浏览器，因此需要更多浏览器来添加前缀。 / p>

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

渐变不适用于Firefox和IE

2 个答案: