twitter bootstrap 按钮在 Firefox 和 chrome 中奇怪地改变了渲染

Question

我有一个问题，我试图用我自己的颜色覆盖 twitter 引导程序 (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 中，颜色是正确的和橙色的，但在其他浏览器中，它是蓝色的，带有橙色的轮廓（蓝色是引导程序中的默认原色)，当我将鼠标悬停在它上面时，一半按钮突出显示橙色，但另一半仍然是蓝色，当我完全单击它时，它变成橙色。

谢谢！！

Answer 1

您在正确的轨道上，您只需取消在这些按钮中设置的 background-image 属性即可获得所需的颜色，因此将以下内容与您的定义一并添加，它应该可以工作：

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

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