Хром/сафари отображает рамку вокруг изображения

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;

}

Извините, раньше я скопировал какой-то старый код. Вот код, который вызывает у меня проблемы.

Заранее спасибо

Ответ 1

Теперь я не знаю, является ли это ошибкой с Chrome или нет, но появляется серая рамка, когда она не может найти изображение, URL-адрес изображения поврежден или, как в вашем случае, src не существует. Если вы дадите изображению правильный URL-адрес, и браузер найдет его, граница исчезнет. Если изображение не должно иметь src, тогда вам нужно будет удалить высоту и ширину.

Ответ 2

sarcastyx прав, но если вы хотите работать с рабочим столом, вы можете установить ширину и высоту на 0 и отступы, чтобы сделать пространство для вашего изображения.

Если вы хотите значок 36x36, вы можете установить ширину и высоту в 0 и прописать: 18px

Ответ 3

.related_photo {
   content: '';
}

Ответ 4

Я знаю, что это старый вопрос. Но другое решение - установить src на 1x1 прозрачный пиксель

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

Это работает для меня.

Ответ 5

Это может произойти, когда изображение динамически устанавливается css (например, http://webcodertools.com/imagetobase64converter), чтобы избежать дополнительных HTTP-запросов. В этом случае мы не хотим иметь изображение по умолчанию из-за проблем с производительностью. Я решил это, переключившись с тега img на тег div.

Ответ 6

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

Ответ 7

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

Ответ 8

Внутри img.related_photo вам нужно изменить border: solid thin #DFDFDF; на border: 0.

Ответ 9

Я исправил эту проблему:

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

right: 15px - это то, где вы хотите, чтобы изображение отображалось, но вы можете разместить его там, где хотите.

Ответ 10

Я только что добавил src= "trans.png", trans.png - это всего лишь 100x100 прозрачный фон png из фотошопа. Работали как очарование без границ

Ответ 11

Подводя итог уже приведенным ответам: ваши варианты удаления серой границы из img:not([src]), но все же отображение изображения с помощью background-image в Chrome/Safari:

Использовать другой тег, который не имеет этого поведения. (Спасибо @Druvision)
Например: div или span.
Грустное лицо: это не совсем как семантическое.
Используйте padding для определения размеров. (Спасибо @Gonzalo)
Например, padding: 16px 10px 1px; заменяет width:20px; height:17px;
Грустное лицо: размеры и намерения не так очевидны в CSS, особенно если это не четный квадрат, как пример @Gonalo.