рамка отображения Chrome / Safari вокруг изображения - PullRequest
Новая
       35

рамка отображения Chrome / Safari вокруг изображения

22 голосов
/ 20 января 2011

Chrome и Safari отображают рамку вокруг изображения, но я не хочу ее.В Мозилле нет границ.Я просмотрел 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;

}

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

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

Ответы [ 11 ]

42 голосов
/ 20 января 2011

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

12 голосов
/ 16 ноября 2012

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

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

5 голосов
/ 25 февраля 2015

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

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

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

5 голосов
/ 17 октября 2014 
.related_photo {
   content: '';
}
3 голосов
/ 24 ноября 2012

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

2 голосов
/ 10 февраля 2015 
img[src=""]{
    content: "";
}
0 голосов
/ 18 августа 2016

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

0 голосов
/ 02 июля 2015

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

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

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

0 голосов
/ 29 октября 2013

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

  • Используйте другой тег, который не имеет такого поведения . (Спасибо @Druvision)
    Например: div или span.
    Грустное лицо: это не совсем так семантически.

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

0 голосов
/ 20 января 2011

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

Страница:
...