html/css - 使用带有 <img> 标签的精灵 - 如何在 Chrome 中删除轮廓？答案

【问题标题】：html/css - using sprite with <img> tag - how to remove the outline in Chrome?html/css - 使用带有 <img> 标签的精灵 - 如何在 Chrome 中删除轮廓？
【发布时间】：2011-12-19 22:38:01
【问题描述】：

我正在重做一个使用 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;
    }

任何想法，轮廓/边框来自哪里以及如何删除它？

谢谢

【问题讨论】：

你试过outline: none 吗？
您确实意识到图像上的src 和alt 属性是必需的？
图像只是菜单项前面的小徽标。我在 Stack Overflow 上找到了另一篇文章，我正在尝试关注 stackoverflow.com/questions/4335957/using-sprites-with-img-tag
@frequent：您绝对应该为这些图像使用跨度。我认为你对这个答案所说的“语义意义”感到困惑。菜单项前面的图标没有语义意义，它是装饰性的。段落上下文中的图像具有语义含义。
@frequent 顺便说一句，如果你可以绝对定位图像，你可以使用 CSS clip 属性直接在前景中使用精灵。

标签： html css image css-sprites outline

【解决方案1】：

此问题可能是由于您的图像标签中没有 src 属性。

【讨论】：

噗。那是很久以前的事了……我剪了这个。

【解决方案2】：

如果您可以绝对定位图像，则可以使用 CSS clip 属性直接在前景中使用精灵。

【讨论】：

只是为了添加更多信息。虽然这在 IE7+、FF、Chrome、Safari 和 iOS 上运行良好，但在 Android 上却不行。

【解决方案3】：

这通常是由边框属性引起的。我知道你说你认为它是大纲，但你有没有在你的 img 课上尝试过这个......

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

或者这个

.imgClass
{
border:0;
}

【讨论】：

抱歉，没用。我只是用替换了只是为了看看会发生什么。这行得通，但我宁愿找到一种方法来保留