奇怪的Chrome背景圖像中斷

在我的網站上，我有一個由背景圖片和jQuery懸停事件組成的按鈕。問題是，在Chrome和Chrome瀏覽器中（在我的測試中），將鼠標懸停在按鈕上時，懸停圖像略微被一個像素點截斷。我已經測試了一些，並意識到它只有在出現滾動條時出現（爲了一致性，我添加了overflow-y：滾動到我的所有頁面）。如果我從寬度中減去半個像素，問題就解決了，但是它也會影響邊距。背景圖片大小相同，爲102x42px。奇怪的Chrome背景圖像中斷

這裏是我的CSS和link to my website：

.menubutton 
{ 
margin:0px auto; 
margin-top:-10px; 
background:url('../img/buttons/menureg.png'); 
width:102px; 
height:32px; 
display:block; 
color:#6F6F6F; 
font-size:16px; 
text-shadow: 0px 0px 1px rgba(0,0,0,0.2); 
padding-top:10px; 
text-decoration:none; 
} 
.menubutton:hover 
{ 
background:url('../img/buttons/menuhover.png'); 
color:#E0E0E0; 
text-shadow: 0px 0px 1px rgba(0,0,0,0.75); 
}

來源

2012-09-23 Harangue

對我來說確定（Chrome 21）。你可以張貼截圖嗎？ –

我確認錯誤，並像蘭迪我認爲這是一個問題，而不是你的代碼。似乎問題出現和消失，因爲如果頁面的寬度，如果我調整我的窗口的問題出現和消失。

經過一些試驗和錯誤，似乎問題部分來自封裝您的menubutton的td元素大小。在嘗試了一些東西后，我發現了一個解決方法。既然你知道td元素和menubutton的大小，你不需要自動保證金。所以：

.menubutton 
{ 
margin:0px 24px; 
margin-top:-10px; 
background:url('../img/buttons/menureg.png'); 
width:102px; 
height:32px; 
display:block; 
color:#6F6F6F; 
font-size:16px; 
text-shadow: 0px 0px 1px rgba(0,0,0,0.2); 
padding-top:10px; 
text-decoration:none; 
}

你可以測試一下，看看它是否可以解決問題嗎？

來源

2012-09-23 20:27:47 NicMagnier

這很好。你認爲我應該向Google報告嗎？ – Harangue

它不會傷害:) – NicMagnier

我看到你的問題，但它看起來像一個Chrome有錯誤，但是，沒有一個代碼錯誤。四個元素中有四個具有正確的懸停背景，所以它有點奇怪。您可以嘗試在懸停中再次設置元素的寬度，或者將元素的寬度設置爲1px，並設置background-repeat：none;顯示額外的像素。雖然不好的解決方案..

來源

2012-09-23 20:16:37 Randy

奇怪的Chrome背景圖像中斷

回答

相關問題