Twitter Bootstrap按鈕 - 突破懸停的背景

我在我的一個網站上使用Twitter Bootstrap。我遇到按鈕有問題。所有按鈕的背景都會在懸停時中斷 - 在一頁上。但在其他頁面上正常工作。Twitter Bootstrap按鈕 - 突破懸停的背景

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

問題發生在像火狐，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>

好的我已將代碼添加到演示服務器。點擊以下鏈接查看工作示例。鏈接刪除

來源

2013-06-30 Atif

你能發佈一些代碼嗎？ –

好像你是藍墨水... – AntouanK

@FrankPresenciaFandos什麼樣的代碼？從螢火蟲或整個引導CSS的CSS。 – Atif

原因您遇到這個問題，那是因爲你有下面的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;

來源

2013-06-30 23:17:32

謝謝。你已經指出我的解決方案。應用於該插件的bootstrap css與應用於該網站的主題的CSS相沖突。我現在所要做的就是在引導樣式表中標記這條線是非常重要的。 background-image：-webkit-linear-gradient（top，＃0088cc，＃0044cc）！important; – Atif

Twitter Bootstrap按鈕 - 突破懸停的背景

回答

相關問題