Twitter Bootstrap 按钮 - 悬停时打破背景答案

【问题标题】：Twitter Bootstrap Button - Breaking background on hoverTwitter Bootstrap 按钮 - 悬停时打破背景
【发布时间】：2013-06-28 01:02:41
【问题描述】：

我在我的一个网站上使用 Twitter Bootstrap。我的按钮有问题。所有按钮的背景都在悬停时中断 - 在一页上。但在其他页面上运行良好。

Twitter button breaking on hover http://oi44.tinypic.com/wre2w5.jpg

问题出现在 firefox、chrome 和 opera 等浏览器中 - 但在 IE9 上运行良好

加法 Firebug css - 点击链接查看图片文件 - Firebug css

<div class="form-actions">
<button type="button" class="btn btn-primary" id="submit-calculations">Submit</button>
<button type="reset" class="btn">Cancel</button>
</div>

好的，我已将代码添加到演示服务器。单击以下链接以查看工作示例。链接已删除

【问题讨论】：

你能发布一些代码吗？
好像你的蓝色墨水用完了...
@FrankPresenciaFandos 什么样的代码？来自萤火虫的 css 或整个引导 css。
生成按钮的那个，你是怎么做的？此外，如果您可以在一个小的 jsfiddle 案例中复制它，那将非常有帮助。或指向您网站的链接，我们可以在该链接中实时查看
@FrankPresenciaFandos 我还添加了代码和来自萤火虫的 css 屏幕截图。谢谢

标签： css button twitter-bootstrap hover

【解决方案1】：

您遇到此问题的原因是您有以下 CSS（在 style.css 的第 273 行附近）：

.menu-toggle:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
article.post-password-required input[type=submit]:hover {
    color: #5e5e5e;
    background-color: #ebebeb;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
    background-image: linear-gradient(top, #f9f9f9, #ebebeb);
}

只需删除它，一切都会如您所愿。

OP 对上述答案的补充

将引导样式表中的以下行标记为重要

background-image: -moz-linear-gradient(top, #0088cc, #0044cc) !important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)) !important;
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc) !important;
background-image: -o-linear-gradient(top, #0088cc, #0044cc) !important;
background-image: linear-gradient(to bottom, #0088cc, #0044cc) !important;

【讨论】：

谢谢。你已经向我指出了解决方案。应用到插件的引导 css 与应用到网站的主题 css 冲突。我现在要做的就是在我的引导样式表中将此行标记为重要。背景图像：-webkit-linear-gradient(top, #0088cc, #0044cc) !important;