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属性直接在前景中使用精灵。