Question

我有一个问题，我试图用我自己的颜色覆盖twitter bootstrap（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;
}

我甚至把它们放在它们中，并且它仍旧呈现奇怪的颜色，然后在我悬停时添加我的颜色（但只有一半）。尝试发布图片，但它不会让我....基本上，在IE中，颜色是正确的和橙色，但在其他浏览器中，它是蓝色与橙色轮廓（蓝色是引导程序中的默认主要颜色），当我将鼠标悬停在它上面时，一半按钮突出显示橙色，但另一半仍然是蓝色，当我完全点击它时，它变为橙色。

谢谢！

Answer 1

你走在正确的轨道上，你只需要取消这些按钮中设置的background-image属性以获得你想要的颜色，所以将以下内容与你的定义一起添加它应该有效： / p>

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

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

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

1 个答案: