twitter-bootstrap - Twitter Bootstrap 按钮在 Firefox 和 Chrome 中奇怪地改变渲染

Question

我有一个问题，我试图用我自己的颜色覆盖 twitter bootstrap (v 2.0.3) 主按钮，并且它在 IE 中工作正常，但在 FireFox 或 Chrome 中不起作用。因此，在我的页面上，我首先链接到 bootstrap.css，然后紧接着，我链接到我自己的样式表，该样式表有我自己的更改。现在，我的类的命名与 Bootstrap 的类相同，但我认为我的类会优先，因为我的样式表链接到 Bootstrap 类之后:

<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 中，颜色是正确的并且是橙色的，但在其他浏览器中，它是带有橙色轮廓的蓝色(蓝色是 bootstrap 中的默认主色) )，当我将鼠标悬停在它上面时，一半按钮突出显示橙色，但另一半仍然是蓝色，当我完全单击它时，它会变成橙色。

谢谢!!

Answer 1

您的做法是正确的，您只需取消这些按钮中设置的 background-image 属性即可获得您想要的颜色，因此将以下内容与您的定义一起添加它应该有效:

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

演示:http://jsfiddle.net/ETagZ/