Question

Chrome和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;

}

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

提前致谢

Answer 1

现在我不知道这是否是Chrome的错误，但是当它找不到图像时出现灰色边框，图像网址被破坏或者在你的情况下src不存在。如果您为图像提供正确的URL并且浏览器找到它，则边框会消失。如果图像没有src，则需要删除高度和宽度。

Answer 2

sarcastyx是正确的，但是如果你想要一个workarround，你可以将宽度和高度设置为0，并使用填充为图像腾出空间。

如果你想要一个36x36的图标，你可以将宽度和高度设置为0和pading：18px

Answer 3

.related_photo {
   content: '';
}

Answer 4

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

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

这适合我。

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

在img.related_photo内，您需要将border: solid thin #DFDFDF;更改为border: 0。

Answer 9

我已修复此问题：

<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">

right: 15px是您希望图片显示的位置，但您可以将其放置在您想要的位置。

Answer 10

我刚刚添加了src =＆＃34; trans.png＆＃34;，trans.png只是来自photoshop的100x100透明背景png。工作就像一个无国界的魅力

Answer 11

懒惰的图像解决方案（`img loading="lazy"`）

如果您正在使用 lazy image loading，您可能会在图像加载之前注意到这个细边框，而不是在加载之前。

与普通的垂直滚动网页相比，水平滚动画廊更有可能看到此内容。

为什么？

不幸的是，延迟加载仅适用于垂直轴。我假设这是因为您很有可能会向下滚动，而不是从左到右。延迟加载的全部意义在于减少“低于首屏”的图像消耗不必要的带宽。

方法 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 似乎都有一个零像素窗口来查找水平惰性图像。

Answer 12

总结已经给出的答案：您可以选择从img:not([src])移除灰色边框，但仍在Chrome / Safari中使用background-image显示图片：

使用不具有此行为的其他标记。（感谢@Druvision）例如：div或span。
悲伤的脸：它不像语义。
使用padding定义尺寸。（感谢@Gonzalo）
例如padding: 16px 10px 1px;取代width:20px; height:17px; Sad悲伤的面孔：尺寸和意图在CSS中并不那么明显，特别是如果它不是像@ Gonalo那样的偶数方块例。

chrome / safari显示图像周围的边框

12 个答案:

懒惰的图像解决方案（`img loading="lazy"`）

chrome / safari显示图像周围的边框

12 个答案:

懒惰的图像解决方案（img loading="lazy"）

懒惰的图像解决方案（`img loading="lazy"`）