2

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

.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 支持此功能。但我无法弄清楚我的样式表有什么问题。

当我执行“检查元素”时，Firefox 将类显示为 a.orange.button，但在“样式”选项卡中，它不显示这些类。它正在选择我的样式表，因为页面的其余部分显示正常。

我在这里想念什么？

4

2 回答 2

1

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

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

清理 jsFiddle 演示

问题肯定不在于多个类。它们在每个现代浏览器中都能正常工作。

更新：我发现了基于这个 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));
}
于 2012-06-14T20:01:32.793 回答
0

尝试使用类似下面的东西

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

-webkit-gradient适用于 webkit 浏览器——比如 Chrome 和 Safari；Firefox 不是 webkit 浏览器。

见http://jsfiddle.net/Wfxym/

发现了一些注释@线性渐变，尤其是跨浏览器 CSS 渐变（有关 Firefox 实现的详细信息可以在 MDN 上找到：https ://developer.mozilla.org/en/CSS/linear-gradient ）

于 2012-06-14T20:01:24.307 回答