3

ツイッターブートストラップ（v 2.0.3）のプライマリボタンを自分の色で上書きしようとしているという問題があります。IEでは正常に機能しますが、FireFoxやChromeでは機能しません。そのため、私のページでは、最初にbootstrap.cssにリンクし、その直後に、独自の変更を加えた独自のスタイルシートにリンクします。現在、私のクラスの名前はブートストラップのクラスと同じですが、私のスタイルシートはブートストラップの後にリンクされているため、私のクラスが優先されると思います。

<link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="~/Content/mystyles.css" rel="stylesheet" type="text/css" />

...したがって、mystyles.cssには、次のものがあります（これも、bootstrap.cssと同じですが、色が異なります）。

.btn-primary {
  background-color: #faa732 !important;
  *background-color: #f89406 !important;
  background-repeat: repeat-x !important;
  border-color: #f89406 #f89406 #ad6704 !important;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;
   background-image: linear-gradient(top, #fbb450, #f89406) !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  background-color: #f89406 !important;
  *background-color: #df8505 !important;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #c67605 \9 !important;
}

私はそれらに！importantを入れても、それでも古い色で奇妙にレンダリングされ、ホバーすると（ただし途中でのみ）私の色が追加されます。画像を投稿しようとしましたが、許可されませんでした....基本的に、IEでは色は正しくオレンジ色ですが、他のブラウザでは、輪郭がオレンジ色の青です（青はブートストラップのデフォルトの原色です） ）、それにカーソルを合わせると、ボタンの半分がオレンジ色で強調表示されますが、残りの半分はまだ青色であり、フルクリックするとオレンジ色になります。

ありがとう！！

4

1 に答える 1

6

あなたは正しい方向に進んでいます、あなたはbackground-imageあなたが望む色を得るためにそれらのボタンで設定されたプロパティをキャンセルする必要があるだけです、それであなたの定義と一緒に以下を追加してください、そしてそれはうまくいくはずです：

.btn-primary {
    background-image: none;
    filter: none;
}

デモ： http： //jsfiddle.net/ETagZ/

于 2012-05-01T19:03:20.130 に答える