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

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这些按钮中设置的属性以获得你想要的颜色,所以将以下内容与你的定义一起添加它应该有效:

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

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