html / css - используя спрайт с тегом <img>- как удалить контур в Chrome?

Question

Я переделываю сайт, на котором я использую спрайт CSS.Я также использую спрайт с некоторыми тегами, которые я не могу удалить.

Таким образом, тег получает CSS-background-image и соответствующую позицию фона.Работает отлично.Мне пришлось удалить атрибут 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

Если вы можете абсолютно точно позиционировать изображение, вы можете использовать спрайт прямо на переднем плане, используя свойство CSS clip.

Answer 3

Обычно это вызвано атрибутом border.Я знаю, что вы сказали, что думаете, что это наброски, но вы пробовали это в своем классе img ...

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

или это

.imgClass
{
border:0;
}