Удалить границу вокруг изображения спрайта в Chrome - PullRequest
Новая
       70

Удалить границу вокруг изображения спрайта в Chrome

20 голосов
/ 07 февраля 2012

При первом использовании этой техники кажется, что независимо от того, какие атрибуты я пытаюсь назначить, граница не исчезнет в Chrome.Другие браузеры в порядке.Я пробовал наброски: нет, границы: 0;и т. д. и т. д. Также попытались добавить цветную рамку вокруг изображения и заметили, что черная рамка все еще там внутри цветной рамки.Кажется, не хочет уходить.

Обход или совет очень ценится. 

.share-link {
display: block;
width: 41px;
height: 32px;
text-decoration: none;
background: url("link-icon.png");
}

.share-link:hover {
background-position: -41px 0;
}


<a title="Share this Link" href="#"><img class="share-link"></a>

Ответы [ 7 ]

39 голосов
/ 07 февраля 2012

Это потому, что вы используете тег img без атрибута src. По сути, Chrome указывает на размер контейнера, в котором ничего нет.

Если вы не хотите помещать изображение между тегами привязки, не используйте тег изображения. Нет необходимости размещать что-либо между тегами.

Демо здесь.

9 голосов
/ 31 октября 2014

Вы можете использовать очень маленькое прозрачное изображение base64 

<img class="share-link"  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
3 голосов
/ 05 февраля 2013

Это ошибка Chrome, игнорирующая "border: none;"style.

Допустим, у вас есть изображение "download-button-102x86.png" размером 102x86 пикселей.В большинстве браузеров вы бы зарезервировали этот размер для его ширины и высоты, но Chrome просто рисует там границу, независимо от того, что вы делаете.

Таким образом, вы обманываете Chrome, думая, что там ничего нет - размер 0pxна 0px, но с точно нужным количеством «отступов» для кнопки.Вот блок идентификатора CSS, который я использую для этого ... 

#dlbutn {
    display:block;
    width:0px;
    height:0px;
    outline:none;
    padding:43px 51px 43px 51px;
    margin:0 auto 5px auto;
    background-image:url(/images/download-button-102x86.png);
    background-repeat:no-repeat;
}

Виола!Работает везде и избавляется от контура / границы в Chrome.

1 голос
/ 07 февраля 2012

Если вы просите избавиться от границы, которая активирует onfocus, то: 

*:focus {outline: none;}

или 

.nohighlight:focus  {  outline:none;  }

Это должно избавить от границы.

0 голосов
/ 18 октября 2018

Вы можете просто оставить атрибут "src" пустым, чтобы исчезнуть граница 

<img class="share-link" src="">
0 голосов
/ 05 декабря 2017

Мои встроенные изображения base64 продолжали показывать серую линию вокруг этого независимо от того, что я сделал Использование <div> вместо <img> работало для меня.

ДО (неправильно) Я использовал:

в HTML: 

<img class='message-bubble-small'>

в CSS: 

img.message-bubble-small {
  background-image: url(data:image/png;base64,...);
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  float: left;
}

ПОСЛЕ Я использовал:

в HTML: 

<div id='message-bubble-small'>

в CSS: 

#message-bubble-small {
  background-image: url(data:image/png;base64,...);
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  float: left;
}

В последнем примере у меня больше нет серых линий в Chrome.

0 голосов
/ 15 июля 2013

По умолчанию любое изображение, обернутое в ссылку, будет иметь рамку вокруг изображения (аналогично тому, как подчеркнут текст). Снятие границы простое 

a image {border: none} or a image {border: 0}

Поскольку я никогда не хочу видеть границу между ссылками на изображения, я обычно устанавливаю вышеуказанное на каждом разрабатываемом мной сайте

...