CSS Sprites在圖像上顯示的圖像損壞，但懸停仍然有效

Question

我無法弄清楚這一點..呃其他人可以。

我有一個圖像按鈕。懸停效果工作正常。但是，我在按鈕圖像上有IE碎片圖標圖標。

Lookie這裏：Funky ImageFunky Image Hover

正如你所看到的......他們除了惱人的破碎的形象都工作。

這裏是我的CSS：

 
.donate-btn{ 
background: transparent url(/custom/img/donate-btn.png) no-repeat; 
overflow:hidden; 
height:45px; 
width:210px; 
float:left; 
} 
.donate-btn:hover{ 
background: transparent url(/custom/img/donate-btn.png) no-repeat; 
height:45px; 
width:210px; 
background-position: 0 -45px; 
} 

Answer 1

這只是意味着你在source屬性引用不存在的圖像。您應該考慮使用實際的<button>標記。它只是需要一些額外的樣式屬性刪除邊框和padding：

.donate-btn{ 
    background: transparent url(/custom/img/donate-btn.png) 0 0 no-repeat; 
    overflow:hidden; 
    height:45px; 
    width:210px; 
    border: none; 
    padding: 0; 
    float:left; 
} 

.donate-btn:hover{ 
    background-position: 0 -45px; 
} 

我還處於懸停狀態消除一些不必要的造型簡單求你的CSS。

<button class="donate-btn" type="submit"></button>