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基本上表示容器的大小，其中没有任何内容。

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

Demo here.

Answer 2

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

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

Answer 3

这是一个Chrome错误，忽略了“border：none;”风格。

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

所以你欺骗Chrome认为那里没有任何东西 - 大小为0px xpx，但是具有恰当数量的“填充”以允许按钮。这是我用来完成这个的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;
}

中提琴！无处不在，可以摆脱Chrome中的轮廓/边框。

Answer 4

如果你要求摆脱激活onfocus的边界，那么：

*:focus {outline: none;}

或

.nohighlight:focus  {  outline:none;  }

这应该摆脱边界。

Answer 5

无论我做了什么，我的base64嵌入式图像都在它周围显示灰线。使用<div>代替<img>为我工作。

BEFORE （错误）我用过：

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;
}

AFTER 我用过：

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中没有灰色线条。

Answer 6

您只需将“ src”属性留空即可淡化边框

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

Answer 7

默认情况下，链接中包含的任何图像都会在图像周围出现边框（类似于文本带下划线的方式）。删除边框很简单

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

由于我从不想看到图像链接周围的边界，我通常在我开发的每个网站上设置上述内容

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

7 个答案: