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

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

2 голосов
/ 05 июля 2011

Недавно я читал о текстовом отступе: -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>

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

1 Ответ

2 голосов
/ 05 июля 2011

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

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/

...