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

Posted 2023-03-05

【中文标题】chrome/safari 显示图像周围的边框

【英文标题】：chrome/safari display border around image

【发布时间】：2011-06-12 04:52:36

【问题描述】：

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;

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

提前致谢

【问题讨论】：

响应您的代码编辑（这使得到目前为止提供的两个答案都无关紧要）：这个边框是“点状的”吗？

不，只是一个实心细边框。不过它不是黑色，是浅灰色

如果您的代码如您所说（以border: none; 完成），那么我看不出问题出在哪里。你确定你没有使用一些旧的缓存版本吗？

这应该没关系，但是您在引号和单词class 之间缺少一个空格。换句话说<a href="../index.html"class="near_place">应该是<a href="../index.html" class="near_place">

您是否尝试过在<img/> 标签中使用src？我在 chrome 中启动了一个 test.html，并带有一个看起来不错的图像。如果没有src，它会显示一个带有灰色边框的白框。我相信你的答案在下面（见 sarcastyx）。

【参考方案1】：

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

【参考方案2】：

我刚刚添加了 src="trans.png"，trans.png 只是一个来自 Photoshop 的 100x100 透明背景 png。 像魅力无国界一样工作

【参考方案3】：

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

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

这对我有用。

【参考方案4】：

我已经解决了这个问题：

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

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

【参考方案5】：

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

【讨论】：

一些描述通常会有所帮助。

【参考方案6】：

.related_photo 
   content: '';

【讨论】：

这个removes the border 在 Chrome 和 Safari 中。不过，稍微解释一下会有所帮助。

虽然内容：' ';未加载图像时隐藏边框，但加载图像时，它也会隐藏图像！所以，这不是解决方案。

@Andrii Katsiubka 这是一个非常棒的技巧，但我不明白为什么内容会这样做......无论如何，最好将此属性仅应用于 之类的 src 属性图像，使用 css选择器如 img :not([src]) content: ' '

【参考方案7】：

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

使用没有此行为的其他标签。 （感谢@Druvision）例如：div 或 span。 悲伤的脸：它不像语义那样。

使用padding 定义尺寸。 （感谢@Gonzalo）例如padding: 16px 10px 1px; 替换width:20px; height:17px; 悲伤的脸：尺寸和意图在CSS 中并不那么明显，特别是如果它不像@Gonalo 的例子那样是一个均匀的正方形。

【参考方案8】：

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

【参考方案9】：

sarcastyx 是对的，但如果您想要一个替代方法，您可以将宽度和高度设置为 0，并设置一个填充来为您的图像腾出空间。

如果你想要一个 36x36 的图标，你可以设置 width 和 height 为 0 和 pading:18px

【讨论】：

谢谢；这对我帮助很大，贡萨洛！

【参考方案10】：

现在我不知道这是否是 Chrome 的错误，但是当它找不到图像时会出现灰色边框，图像 url 已损坏，或者在您的情况下 src 不存在。如果你给图像一个正确的 URL 并且浏览器找到它，那么边框就会消失。如果图像没有 src，则需要删除高度和宽度。

【讨论】：

我遇到了类似的问题，我正在使用带有背景位置和背景图像的精灵。如果我删除宽度和高度，图像就会消失。

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

rparree 的解决方案非常优雅，如果您真的不希望它与您的图像有一个 src。另一种选择是使用 div 元素而不是 src，然后将 CSS“display”设置为“inline-block”

@MichelAyres 有什么解决精灵的办法吗？

【参考方案11】：

在img.related_photo里面，需要把border: solid thin #DFDFDF;改成border: 0。

【讨论】：

虽然border: 0 在技术上有效，但正确的做法是使用border: none，因为border: 0 意味着仍然有一个边框，但它的宽度恰好是0，所以你没有'没看到。

@Jared: Same difference?

【参考方案12】：

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

【讨论】：

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