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

Posted 2023-02-16

【中文标题】在 Chrome 中删除精灵图像周围的边框

【英文标题】：Remove border around sprite image in Chrome

【发布时间】：2012-02-28 16:22:52

【问题描述】：

第一次使用这种技术，似乎无论我尝试分配什么属性，边框都不会在 Chrome 中消失。其他浏览器没问题。我试过大纲：无，边框：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>

【问题讨论】：

抱歉问，黑色边框会不会意外成为图像本身的一部分？

请举一个jsfiddle的例子。

@bazmegakapa 正是我的想法，也许图像小于 41x32px...

我也问过自己这个问题，并证实是准确的：P

【参考方案1】：

如果您要求摆脱激活 onfocus 的边框，那么：

*:focus outline: none;

或

.nohighlight:focus    outline:none;  

这应该去掉边框。

【讨论】：

不管焦点有边框。它保持不变。

【参考方案2】：

这是因为您使用了没有src 属性的img 标记。 Chrome 本质上是在指示容器的大小，其中没有任何内容。

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

Demo here.

【讨论】：

啊……好的。这有点道理。

+1 正是我开始写的。使用img 或带有background-image 集的另一个元素。 More on SO。在 OP 的示例中，background-image 应在 a 上指定。

完美的斯科特。感谢您的信息:) 我相信很多人会发现这很有用。干杯。

【参考方案3】：

这是一个 Chrome 错误，忽略了 "border:none;"风格。

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

所以你欺骗 Chrome 认为那里什么都没有 - 大小为 0px x 0px，但具有完全正确数量的“填充”以允许按钮。这是我用来完成此任务的 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 中的轮廓/边框。

【讨论】：

2015，这在 Chrome 和 IE10 中仍然可以完美运行。谢谢

【参考方案4】：

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

a image border: none or a image border: 0

由于我不想看到图片链接周围的边框，所以我通常在我开发的每个网站上都设置上述内容

【讨论】：

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

错误的 CSS 选择器和错误的答案。他的问题不是属性border，而是chrome在没有src属性的情况下绘制到图像上的“轮廓”（也不是属性outline）。

【参考方案5】：

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

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

【参考方案6】：

无论我做什么，我的 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 中不再有灰线。

【参考方案7】：

你可以把“src”属性留空，让边框变淡

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