删除Chrome中精灵图片周围的边框

Question

第一次使用这种技术,似乎无论我尝试分配边框的哪些属性都不会在Chrome中消失.其他浏览器都很好.我尝试过outline:none,border:0; 还尝试在图像周围添加彩色边框,并注意到黑色边框仍然在彩色边框内.似乎不想消失.

解决方法或建议非常感谢.

.share-link {
display: block;
width: 41px;
height: 32px;
text-decoration: none;
background: url("link-icon.png");
}

.share-link:hover {
background-position: -41px 0;
}


<a title="Share this Link" href="#"><img class="share-link"></a>

Answer 1

这是因为您使用的是img没有src属性的标签.Chrome基本上表示容器的大小,其中没有任何内容.

如果您不想在锚标记之间放置图像,则不要使用图像标记.没有必要在标签之间放置任何东西.

在这里演示.

Answer 2

你可以使用base64非常小的透明图像

<img class="share-link"  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>