html / css - 使用sprite <img> 標簽 - 如何刪除Chrome中的大綱？

Question

我正在重做一個我正在使用CSS精靈的網站。 我也使用sprite和一些標簽，我無法刪除。

因此標簽獲得CSS背景圖像和適當的背景位置。 工作正常。 我不得不刪除alt屬性，因為這一直在Firefox上顯示。 不好，但還可以。

我的問題：在Chrome中我最終在圖像周圍有一個模糊的輪廓。 我首先想到這些是邊界，但我認為這是大綱。

如果我CSS outline: 3px solid blue的微弱邊框，變成3px純藍色...但如果我設置outline: 0; 什么都沒發生。

更多代碼：HTML

<img class="ui-li-icon ui-li-thumb iconComments" />

CSS

.ui-icon, .iconComments, .iconMail, .ui-icon-searchfield:after {
    background:  #FFFFFF  /*{global-icon-color}*/;
    background:  transparent  /*{global-icon-disc}*/;
    background-image:  url(img/sprite.png)  /*{global-icon-set}*/;
    background-repeat: no-repeat;
    -moz-border-radius:  9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    } 
.iconComments {
background-position:    -36px 50%;
    }
.iconMail {
background-position:     2px 50%;
    }
.iconComments, .iconMail {
height: 20px; 
width: 20px;
    }

任何想法，大綱/邊界來自何處以及如何刪除它？

謝謝

Answer 1

問題可能是由於您的圖像標記中沒有src屬性。

Answer 2

通常這是由border屬性引起的。 我知道你說你認為這是大綱，但你是否在你的img課程中嘗試過這個...

.imgClass
{ 
border-style: none; 
text-decoration: none; 
} 

或這個

.imgClass
{
border:0;
}

Answer 3

如果您可以絕對定位圖像，則可以使用CSS clip屬性直接在前景中使用精靈。