颜色渐变在 Firefox 中不起作用答案

【问题标题】：Color gradient not working in Firefox颜色渐变在 Firefox 中不起作用
【发布时间】：2013-05-28 23:03:38
【问题描述】：

好的，我的问题是在 Firefox 中，我的悬停渐变显示为黑到白。黑色是顶部颜色，白色是底部。这是我正在使用的 CSS 悬停代码。这对我来说没有意义，因为我什至没有使用黑色或白色的颜色代码。任何帮助将不胜感激！

nav a {
color: #fff;
background: #b9b9b9; /* Old browsers */
background: -moz-linear-gradient(top,  #b9b9b9 0%, #616161 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b9b9b9), color-stop(99%,#616161)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b9b9b9 0%,#616161 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b9b9b9 0%,#616161 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b9b9b9 0%,#616161 99%); /* IE10+ */



nav a:hover, nav a:active {
background: #b9b9b9; /* Old browsers */
background: -moz-linear-gradient(bottom, #4f4f4f, #b9b9b9 ); /* FF3.6+ */
background: -webkit-linear-gradient(top,  #b9b9b9 0%,#4f4f4f 99%); /* 
background: -o-linear-gradient(top,  #b9b9b9 0%,#4f4f4f 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b9b9b9 0%,#4f4f4f 99%); /* IE10+ */
background: linear-gradient(to bottom,  #b9b9b9 0%,#4f4f4f 99%); /* W3C */

【问题讨论】：

呃......你确定你不只是缺少你的右括号吗？你有nav a {，但没有}。
这两组样式中的第一个没有不带前缀的linear-gradient。您应该确保包括在内。
@mbratch nav 标签是 HTML5 中的新标签...
谢谢 War10ck，我还没学会。非常感谢。
@mbratch 没问题，伙计。快乐编码！ :)

标签： css firefox

【解决方案1】：

您缺少右大括号。

您的代码可以正常工作：http://jsfiddle.net/66QQV/

nav a
{
    color: #fff;
    background: #b9b9b9; /* Old browsers */
    background: -moz-linear-gradient(top,  #b9b9b9 0%, #616161 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b9b9b9), color-stop(99%,#616161)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b9b9b9 0%,#616161 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b9b9b9 0%,#616161 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b9b9b9 0%,#616161 99%); /* IE10+ */
}


nav a:hover, nav a:active
{
    background: #b9b9b9; /* Old browsers */
    background: -moz-linear-gradient(bottom, #4f4f4f, #b9b9b9 ); /* FF3.6+ */
    background: -webkit-linear-gradient(top,  #b9b9b9 0%,#4f4f4f 99%); /* 
    background: -o-linear-gradient(top,  #b9b9b9 0%,#4f4f4f 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b9b9b9 0%,#4f4f4f 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #b9b9b9 0%,#4f4f4f 99%); /* W3C */
}

这是假设您打算将<a> 元素放在<nav> 元素内...如果您打算将其作为类或ID（例如<span class="nav"> 或<div id="nav">），您需要分别使用.nav 或#nav。

【讨论】：

我故意遗漏了更多代码。但我刚刚发现了问题。我在样式表的某处有一个重复的 nav a:hover 。无论如何，谢谢伙计们！ :)