chrome/safari display border around image

2019-01-11 22:19发布

Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.

Here is the code:

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

}

Sorry, I copied some old code before. Here is the code that is giving me trouble

Thanks in advance

11条回答
霸刀☆藐视天下
2楼-- · 2019-01-11 23:01
.related_photo {
   content: '';
}
查看更多
Summer. ? 凉城
3楼-- · 2019-01-11 23:03

I have fixed this issue with:

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

The right: 15px is where you want the image to be shown, but you can place it where you want.

查看更多
看我几分像从前
4楼-- · 2019-01-11 23:04

This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.

查看更多
Fickle 薄情
5楼-- · 2019-01-11 23:05

I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop. Worked like a charm no borders

查看更多
姐就是有狂的资本
6楼-- · 2019-01-11 23:06

Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.

查看更多
Animai°情兽
7楼-- · 2019-01-11 23:09
img[src=""]{
    content: "";
}
查看更多
登录 后发表回答