在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>

- Z with a Z

---

抱歉问一下，那个黑色边框是不是意外地成为了图像的一部分？ - kapa

请提供一个 jsfiddle 的示例。 - Christoph

@bazmegakapa 恰好是我的想法，也许图像比41x32像素小... - Christoph

我也问过自己这个问题，并验证了其准确性 :P - Z with a Z

Answer 1

因为你使用了一个没有 src 属性的 img 标签。Chrome 实际上是在指示一个空容器的大小。

如果你不想在锚点标签之间放置图片，则不要使用图片标签。不需要在标签之间放置任何内容。 演示在此处。

- Scott

---

啊..好的。这有些讲得通了。 - Z with a Z

+1 正是我开始写的。可以使用 img 或另一个设置了 background-image 的元素。更多信息请参见 SO。在 OP 的示例中，background-image 应该在 a 上指定。 - kapa

非常完美，Scott。感谢你的信息 :) 我相信许多人会发现这很有用。干杯。 - Z with a Z

Answer 2

你可以使用一个Base64编码的非常小的透明图片。

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

- Francesco

Answer 3

这是一个Chrome的bug，会忽略“border:none;”样式。

假设你有一张大小为102x86像素的图片“download-button-102x86.png”。在大多数浏览器中，你会将其宽度和高度保留为该尺寸，但是Chrome只会在那里绘制一个边框，无论你做什么。

因此，你需要欺骗Chrome，让它认为这里什么也没有——大小为0px x 0px，但恰好有足够的“padding”来容纳按钮。这是我用来实现这一点的CSS id块...

#dlbutn {
    display:block;
    width:0px;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}

哈喽！Viola！能在所有地方使用并消除Chrome浏览器中的轮廓/边框。

- Randy King

---

2015年的代码在Chrome和IE10上仍然完美运行。谢谢。 - BrianLegg

Answer 4

如果你想要去掉在焦点激活时出现的边框，那么可以这样做：

*:focus {outline: none;}

或者

.nohighlight:focus  {  outline:none;  }

这应该可以去掉边框。

- umbriel

---

无论焦点在哪里，都存在一个边框。它保持不变。 - Z with a Z

Answer 5

我的base64嵌入式图像无论我怎么做都会显示一个灰色的边框。使用<div>而不是<img>对我有用。

之前（错误）我使用了：

在HTML中：

<img class='message-bubble-small'>

CSS中：

img.message-bubble-small {
  background-image: url(data:image/png;base64,...);
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  float: left;
}

在我使用之后：

在HTML中：

<div id='message-bubble-small'>

CSS中：

#message-bubble-small {
  background-image: url(data:image/png;base64,...);
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  float: left;
}

通过最后一个示例，我在Chrome中不再有灰色线条了。

- D-J

Answer 6

您可以将“src”属性留空，这样边框就会淡化

<img class="share-link" src="">

- Matheus Gomes

Answer 7

默认情况下，任何包含在链接中的图像都会有一个围绕图像的边框（类似于文本被下划线的方式）。去掉边框很简单

a image {border: none} or a image {border: 0}

由于我从不想看到图像链接周围的边框，因此我通常在我开发的每个网站上设置如上

- Reza ahmdi

---

这是格式不正确的CSS。正确的选择器是a img而不是a image。 - Scott

错误的CSS选择器，以及错误的答案。他的问题不在于border属性，而是Chrome在图像上没有src属性时绘制的“轮廓线”（也不是outline属性）。 - Claudio Holanda