Удалить границу вокруг спрайта в Chrome

В первый раз, используя эту технику, кажется, что независимо от того, какие атрибуты я пытаюсь назначить, граница не исчезнет в Chrome. Другие браузеры в порядке. Я пробовал контур: none, border: 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>

Ответ 1

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

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

Демо здесь.

Ответ 2

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

*:focus {outline: none;}

или

.nohighlight:focus  {  outline:none;  }

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

Ответ 5

В моих встроенных изображениях 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.

Ответ 6

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

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

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