Question

我的网页上有几个不同颜色的按钮。我有一个类用于按钮的形状，然后是一些给它们颜色的类。

.button    {
  font-family:"Helvetica Neue W01 75 Bold", Helvetica, Arial, Sans-serif;    
  text-decoration: none;
  white-space: nowrap;
  color: #333;
  padding: 13px 15px;
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}   

a.button {
  color: #333;
}

.black.button    {
  background-color: #dedede;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
  background: -moz-linear-gradient((linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=##EFEFEF, endColorStr=##D3D3D3);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#D3D3D3)";
  -webkit-appearance: push-button;
}


.black.button:hover    {
  background: #E2E2E2;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#E2E2E2, endColorStr=#E2E2E2);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E2E2E2, endColorstr=#E2E2E2)";
}

.orange.button    {
  background-color:  #ffaa44;
  background: -webkit-gradient(linear,left bottom, left top, color-stop(0.22, rgb(255,144,9)), color-stop(0.81, rgb(255,170,68)));
  background: -moz-linear-gradient(center bottom, rgb(255,144,9) 22%, rgb(255,170,68) 81%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffaa44, endColorStr=#ff9009);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaa44, endColorstr=#ff9009)";
}   

.orange.button:hover    {
  background: #ff9009;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ff9009, endColorStr=#ff9009);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff9009, endColorstr=#ff9009)";
}

我用它们像：

<a class="orange button" href="#">Click Me</a>

这适用于Chrome和Safari，但在Firefox12（和IE）中不起作用。我只看到一个带有'ClickMe'的白框（所以可能应用.button但不是.orange）

根据我的阅读，Firefox支持此功能。但我无法弄清楚样式表中的错误。

当我执行'Inspect Element'时，Firefox会将该类显示为a.orange.button，但在样式选项卡中，它不会显示这些类。它正在选择我的样式表，因为页面的其余部分显示正常。

我在这里缺少什么？

Answer 1

如果删除无效的CSS代码，它似乎有效。我想知道你的原始CSS代码中是否有这些确切的行（带有...和未关闭的括号 - 这应该会导致问题）：

background: -webkit-gradient(...
border-radius:...

Cleaned up jsFiddle Demo

问题肯定不在多个课程中。 They work fine in every modern browser

更新：我发现问题基于this jsFiddle。这是宣言：

.black.button    {
  background: -moz-linear-gradient((linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
}

(之后，您还需要再开一次-moz-linear-gradient。

正确版本（jsFiddle）：

.black.button    {
  background: -moz-linear-gradient(linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3));
}

Answer 2

尝试使用以下

之类的内容

    background: -moz-linear-gradient( top left, white, black );

-webkit-gradient适用于webkit浏览器 - 例如Chrome和Safari; Firefox不是webkit浏览器。

请参阅http://jsfiddle.net/Wfxym/

@ linear gradients发现了一些注释，尤其是Cross-browser CSS gradient（有关Firefox实施的详细信息，请访问MDN：https://developer.mozilla.org/en/CSS/linear-gradient）

Firefox12：多个css类似乎对我不起作用

2 个答案: