Отрицательный текст-отступ вызывает большой выбор ссылки при клике

Question

Так что метод, который я часто использую для создания хороших SEO-ссылок с использованием изображений, - это text-indent: -9999px; трюк. По сути, я создаю якорь уровня блока с фоновым изображением. Я установил для text-indent большое отрицательное число, чтобы вы его не видели, и это хорошо для SEO. Однако, когда я нажимаю на ссылку, ее контур отрывается от страницы (то есть идет с очень далеким текстом). Я обнаружил, что это происходило только в определенных случаях, большую часть времени :

<div>
  <a href="#">SEO text</a>
</div>

div {
  width: 100px;
  height: 100px;
}

  div a {
    display: block;
    text-indent: -9999px;
    width: 100px;
    height: 100px;
    background: url(stuff) etc...;
  }

Приведенный выше код в 95% случаев будет иметь только контур, когда вы щелкаете ссылку только в области размером 100 x 100 пикселей. Тем не менее, если не определить размеры родителя, кажется, что стреляют со страницы .... Я думаю. Но в этом моем случае у него есть размеры на родительском элементе, но он все еще остается за пределами страницы. В результате я сделал трюк a span { display: none; }, но я хочу знать, как я могу сделать это с трюком text-indent, но исправить контур.

Кто-нибудь знает, как это исправить? Нужен ли мне другой родитель или нужно установить другое свойство CSS?

Answer 1

Добавьте overflow:hidden к тегу.

div a {
  overflow: hidden;
}

При этом сохраняется граница контура, но только в указанных координатах элемента.

Применение overflow: hidden к элементу div или outline: none, как Уэйн Остин предполагает, что полностью удалит контур, что является проблемой удобства использования.

Answer 2

Просто добавьте переполнение: скрыто на вашем div

Answer 3

Вот отличная статья для удаления этого проклятого контура в Firefox

просто добавить ссылку было очень лениво, поэтому добавьте это в свой CSS:

a
{
  outline: none;
}
:focus
{
  -moz-outline-style: none;
}