Альтернатива text-indent:-999em для создания доступных ссылок с фоновым CSS

Question

Недавно я читал о text-indent:-999em может быть ошибочно принят поисковыми роботами за технику спама.

Один из наших дизайнеров внешнего интерфейса регулярно использует эту технику для добавления ссылок на области, использующие фоновые спрайты.

Возьмите следующий html / css:

//html
<div id="masthead">
  <a href="/path/to/page">View this in more detail</a> 
</div>

//css
#masthead {
   background:transparent url(/path/to/image.png) top left no-repeat;
   position:relative;
}

#masthead a {
   display:block;
   width:100%
   height:100%;
   text-indent:-999em;
}

Это имеет эффект кликабельности фонового изображения.

Есть ли лучшая альтернатива этому?

Я могу добиться того же, не используя трюк с отступом в тексте, используя прозрачный gif и alt текст, как бы это ни чувствовал старый skool.

<a href="/path/to/page"><img src="transparent.gif" alt="View this in more detail" /></a>

Просто интересно услышать, каково общее согласие по этому вопросу.

Answer 1

Вы можете использовать это как альтернативу отступа текста и с меньшей разметкой:

CSS

a{
    background: url("http://www.google.co.in/intl/en_com/images/srpr/logo1w.png") no-repeat;
    display:block;
    width:100px;
    height:100px;
    font-size:0;
}

Проверьте этот пример: http://jsfiddle.net/sandeep/epq2F/