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

24

谷歌浏览器和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;

}

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

先行致谢。


针对您的代码编辑(使得迄今为止提供的两个答案都不相关):这个边框是“虚线”吗? - thirtydot
不,只是一个实心的细边框。但它不是黑色的,而是浅灰色。 - golf_nut
1
如果你的代码像你说的那样(包括 border: none;),那么我看不出问题可能是什么。你确定你没有使用一些旧的缓存版本吗? - thirtydot
这个不应该有影响,但是你在引号和单词 class 之间缺少了一个空格。换句话说,<a href="../index.html"class="near_place"> 应该改为 <a href="../index.html" class="near_place"> - Jared
1
你尝试在<img/>标签中加入src了吗?我在Chrome中打开了一个test.html文件,并且加入了一张图片,它看起来很好。但是如果没有src,它会显示一个带有灰色边框的白色框。我相信你的答案在下面(请参见sarcastyx)。 - Brett Pontarelli
12个回答

0
总结已给出的答案:在Chrome/Safari中,您可以使用background-image将图像显示在img:not([src])中,但仍删除灰色边框的选项包括:
  • 使用不具有此行为的其他标记。 (感谢@Druvision)
    例如:divspan
    难过的是:它不太语义化。

  • 使用padding定义尺寸。 (感谢@Gonzalo)
    例如padding: 16px 10px 1px;取代width:20px;height:17px;
    难过的是:CSS中的尺寸和意图不太明显,特别是如果它不像@Gonalo的例子一样是个正方形。


0

我已经修复了这个问题,方法如下:

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

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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接