twitter bootstrap 按钮在 Firefox 和 chrome 中奇怪地更改渲染 [英] twitter bootstrap button changes rendering oddly in firefox and chrome

问题描述

我有一个问题，我试图用我自己的颜色覆盖 twitter bootstrap (v 2.0.3) 主按钮，它在 IE 中运行良好，但在 FireFox 或 Chrome 中不起作用.所以在我的页面上，我首先链接到 bootstrap.css，然后立即链接到我自己的样式表，该样式表有我自己的更改.现在，我的类的名称与引导程序的名称相同，但我认为我的类会优先，因为我的样式表链接到引导程序之后:

I have an issue where I am trying to override the twitter bootstrap (v 2.0.3) primary buttons with my own colors, and it works fine in IE, but not in FireFox or Chrome. So on my page, I first link to bootstrap.css, and then right after that, I link to my own stylesheet that has my own changes. Now, my classes are named the same as the bootstrap ones, but I would think mine would take precedence as my stylesheet is linked to after the bootstrap one:

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

...所以在 mystyles.css 中，我有以下内容(同样，就像在 bootstrap.css 中一样，但我有不同的颜色):

...so in mystyles.css, I have the following (which again, is just like in bootstrap.css, but I have different colors):

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

I even put !important in them, and it still renders odd, with the old colors, and then adds my color when I hover (but only halfway). Tried to post images, but it won't let me....basically, in IE, the color is correct and orangish, but in the other browsers, it is blue with an orange outline (blue is the default primary color in bootstrap), and when I hover over it, half the button highlights orange, but the other half is still blue, and when I full click on it, then it becomes orange.

谢谢！！

推荐答案

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

You're on the right track, you just need to cancel out the background-image property set in those buttons to get the color you want, so add the following in tandem with your definitions and it should work:

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

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

这篇关于twitter bootstrap 按钮在 Firefox 和 chrome 中奇怪地更改渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！