渐变在 Firefox 和 IE 中不起作用答案

【问题标题】：Gradient is not working in firefox and IE渐变在 Firefox 和 IE 中不起作用
【发布时间】：2014-01-31 06:30:11
【问题描述】：

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))

}

【问题讨论】：

您可以使用colorzilla.com/gradient-editor 更轻松地生成渐变。您使用的语法目前还不完整。
当您只指定 Firefox 和 Chrome/Safari 供应商前缀时，为什么希望它在 IE 中工作？

标签： html css internet-explorer google-chrome firefox

【解决方案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

【讨论】：

您的类选择器缺少. 前缀。
@Joeytje50 好电话。谢谢。 :)

【解决方案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。

【讨论】：