В первый раз, используя эту технику, кажется, что независимо от того, какие атрибуты я пытаюсь назначить, граница не исчезнет в 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>
Это потому, что вы используете тег img без атрибута src. Chrome по сути указывает размер контейнера, в котором ничего нет.
Если вы не хотите размещать изображение между привязными тегами, не используйте тег изображения. Не нужно размещать что-либо между тегами.
вы можете использовать base64 очень маленькое прозрачное изображение
<img class="share-link" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
Это ошибка 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.
Если вы попросите избавиться от границы, которая активирует onfocus, то:
*:focus {outline: none;}
или
.nohighlight:focus { outline:none; }
Это должно избавиться от границы.
В моих встроенных изображениях 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.
По умолчанию любое изображение, обернутое в ссылку, будет иметь границу вокруг изображения (аналогично тому, как текст подчеркивается). Удаление границы прост
a image {border: none} or a image {border: 0}
Поскольку я никогда не хочу видеть границу вокруг ссылок на изображения, я обычно устанавливаю выше на каждом сайте, который я разрабатываю