Chrome/Safari在图像周围显示边框

Question

谷歌浏览器和Safari浏览器在图片周围显示了一个边框，但我不想要。在Mozilla中没有边框。我已经查看了 CSS 和 HTML，但是找不到导致此问题的任何内容。

这是代码：

<tr>
  <td class="near">
    <a href="../index.html"class="near_place">
      <img class="related_photo" />
      <h4 class="nearby"> adfadfad </h4>
      <span class="related_info">asdfadfadfaf</span>
    </a>
    ...

CSS：

a.near_place {
    border: none;
    background: #fff;
    display: block;
}

a.near_place:hover{
    background-color: #F5F5F5;
}

h4.nearby {
    height: auto;
    width: inherit;
    margin-top: -2px;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: normal;
    color: #000;
    display: inline;
}

img.related_photo {
    width: 80px;
    height: 60px;
    border: none;
    margin-right: 3px;
    float: left;
    overflow: hidden;
}

span.related_info {
    width: inherit;
    height: 48px;
    font-size: 11px;
    color: #666;
    display: block;
}


td.near {
    width: 25%;
    height: 70px;
    background: #FFF;

}

抱歉，我之前复制了一些旧代码。这里是让我困扰的代码。

先行致谢。

- golf_nut

---

针对您的代码编辑（使得迄今为止提供的两个答案都不相关）：这个边框是“虚线”吗？ - thirtydot

不，只是一个实心的细边框。但它不是黑色的，而是浅灰色。 - golf_nut

如果你的代码像你说的那样（包括 border: none;），那么我看不出问题可能是什么。你确定你没有使用一些旧的缓存版本吗？ - thirtydot

这个不应该有影响，但是你在引号和单词 class 之间缺少了一个空格。换句话说，<a href="../index.html"class="near_place"> 应该改为 <a href="../index.html" class="near_place">。 - Jared

你尝试在<img/>标签中加入src了吗？我在Chrome中打开了一个test.html文件，并且加入了一张图片，它看起来很好。但是如果没有src，它会显示一个带有灰色边框的白色框。我相信你的答案在下面（请参见sarcastyx）。 - Brett Pontarelli

Answer 1

现在我不确定这是否是Chrome的一个漏洞，但是当它找不到图像、图像URL损坏或者在您的情况下src不存在时，灰色边框会出现。如果您为图像提供正确的URL并且浏览器找到了它，那么边框就会消失。如果图像不需要src，则需要删除高度和宽度。

- sarcastyx

---

我遇到了类似的问题，我正在使用带有background-position和background-image的sprite。如果我删除宽度和高度，图像就会消失。 - Michel Ayres

@MichelAyres，对于一个精灵，你需要给它一个高度和宽度，并需要查看代码以弄清发生了什么。我建议您提出自己的问题并发布有缺陷的代码，以便我们可以为您提供更多帮助。 - sarcastyx

rparree的解决方案非常优雅，如果您真的不想将其与图像一起使用，则可以选择另一种选项，即使用div元素代替src，然后将CSS“display”设置为“inline-block”。 - Shaun314

@MichelAyres 如果涉及到精灵的情况，有什么修复方法吗？ - NeiL

Answer 2

是对的，但如果你想要一个解决方法，你可以将宽度和高度设置为0，并设置填充来为图像留出空间。

如果你想要一个36x36的图标，可以将宽度和高度设置为0，然后设置填充为18像素。

- Gonzalo

Answer 3

我知道这是一个老问题。但是另一种解决方案是将src设置为一个1x1的透明像素。

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

这对我有效。

- raphaëλ

Answer 4

.related_photo {
   content: '';
}

- Andrii Katsiubka

---

这个代码可以在Chrome和Safari中去除边框。不过最好还是加上一些解释。 - showdev

虽然 content: ' '; 可以在图片未加载时隐藏边框，但当图片加载完成后也会将图片隐藏！因此，这并不是一个解决方案。 - Ifti Mahmud

@Andrii Katsiubka 这个技巧真的很棒，但我不明白为什么要那样做... 无论如何，最好只对像 <img/> 这样的没有 src 属性的图像应用这个属性，使用类似于 img :not([src]){ content: ' ' } 的 CSS 选择器。 - BurebistaRuler

Answer 5

img[src=""]{
    content: "";
}

- Ben

---

有些描述通常会有所帮助。 - Halvor Holsten Strand

Answer 6

这可能发生在图像通过 CSS 动态插入（例如通过 http://webcodertools.com/imagetobase64converter）以避免额外的 HTTP 请求时。在这种情况下，由于性能问题，我们不希望有默认图像。我已经通过从 img 标签切换到 div 标签来解决了这个问题。

- Druvision

Answer 7

懒加载图片解决方案 (img loading="lazy")

如果您正在使用 懒加载图片，您可能会注意到在图像加载之前有一个非常细的边框。

您更可能在水平滚动画廊中看到这种情况，而不是在普通的垂直滚动网页上。

为什么？

不幸的是，懒加载只在垂直轴上有效。我猜这是因为你更有可能向下滚动，而不是左右滚动。懒加载的整个目的是减少“页面下方”图像消耗不必要的带宽。

解决方案1：

检测用户何时滚动（例如使用交叉观察器），然后在要立即加载的每个图像上设置 loading="eager"。

我实际上没有测试过这个，可能一些浏览器不会立即加载图片 - 但应该没问题。

解决方案2：

检测图像何时完成加载，然后淡入。

img.setAttribute('imageLoaded', 'false');
img.onload = () => 
{
   img.setAttribute('imageLoaded', 'true');
};

然后使用CSS隐藏图像，直到它加载完成，然后它会漂亮地淡入：

img
{
    opacity: 1;
    transition: opacity .5s;
}

img[imageLoaded='false'] 
{
    opacity: 0;  // hide image including gray outline
}

此外，这种行为可能会发生变化，浏览器未来可能足够聪明以检测水平滚动元素 - 但现在Chrome和Safari似乎都有一个零像素的窗口用于查找水平懒惰图像。

- Simon_Weaver

Answer 8

img.related_photo {
  width: 80px;
  height: 60px;
  **border: solid thin #DFDFDF;** //just remove this line
  margin-right: 3px;
  float: left;
  overflow: hidden;
}

- maga

---

抱歉，我之前复制了一些旧代码。这是现在给我带来麻烦的代码。 - golf_nut

Answer 9

在 img.related_photo 中，你需要将 border: solid thin #DFDFDF; 改为 border: 0。

- thirtydot

---

虽然 border: 0 技术上可以工作，但正确的方法是使用 border: none，因为 border: 0 暗示着仍然存在边框，但它的宽度恰好为0，所以你看不到它。 - Jared

@Jared：一样的吗？ - thirtydot

Answer 10

我刚刚添加了src="trans.png"，trans.png只是来自Photoshop的一个100x100透明背景png。 完美地工作，没有边框

- seca400