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

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" />

这适合我.