2

Web ページにさまざまな色のボタンがいくつかあります。ボタンの形状用のクラスが 1 つあり、次に色を指定するクラスがいくつかあります。

.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 として表示しますが、[スタイル] タブではこれらのクラスを表示しません。ページの残りの部分が正常に表示されるため、スタイルシートを選択しています。

ここで何が欠けていますか？

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-gradientChrome や Safari などの Webkit ブラウザ用です。Firefox は Webkit ブラウザーではありません。

http://jsfiddle.net/Wfxym/を参照してください

@線形グラデーション、特にクロスブラウザー CSS グラデーション(Firefox 実装の詳細については、MDN で確認できます: https://developer.mozilla.org/en/CSS/linear-gradient )

于 2012-06-14T20:01:24.307 に答える