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

Поэтому метод, который я часто использую для создания хороших ссылок 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?

Ответ 1

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

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

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

Ответ 2

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

div a {
  overflow: hidden;
}

Это поддерживает границу контура, но только в указанных координатах элемента.

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

Ответ 3

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