Question

我在我的一个网站上使用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>

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

Answer 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加入 - 上述答案

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

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;

Twitter引导按钮 - 在悬停时打破背景

1 个答案: