как Скрыть текст не скрывая якорь

скажем, у меня есть следующие разметки:

<li><a href="somehwere">Link text</a></li>

Если у меня есть фоновое изображение на теге a, как я могу Скрыть текст ссылки, используя только css? размер шрифта: 0, кажется, отлично работает на теге a, кроме как в IE7 little blobs show.

спасибо

  • Спасибо за помощь до сих пор iv используется line-height: 0; и font-size: 0; и text-indent:- 999px; но он по-прежнему показывает некоторые капли в safari, любые идеи?
10 63
css

10 ответов:

попробовать 

 a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }


Элемент color: transparent; охватывает проблему с браузерами Webkit, все еще отображающими 1px текста.

162

оберните текст в промежуток и установите visibility:hidden; Visibility hidden скроет элемент, но он по-прежнему будет занимать одно и то же место на странице (и наоборот: никто не удаляет его со страницы).

18
a { text-indent:-9999px; }

имеет тенденцию работать хорошо от моего опыта.

13

мини-совет:

У меня был следующий сценарий:

<a href="/page/">My link text
:after
</a>

Я спрятал текст с размером шрифта: 0, поэтому я мог бы использовать значок FontAwesome для него. Это работало на Chrome 36, Firefox 31 и IE9+.

Я бы не рекомендовал color: transparent, потому что текст все еще существует и выбирается. Использование line-height :0px не позволяло мне использовать: after. Может быть, потому что мой элемент был встроенным блоком.

видимость: скрытый: не позволил мне использование :после.

текст-абзац: -9999px;: также переместил: после элемента

5
text-indent :-9999px

работает безотказно.

3

Я следил за лучшим ответом локтя, и он работал очень хорошо. Единственная проблема у меня была с Chrome (моя текущая версия-27.0.1453.94 m). Проблема, с которой я столкнулся, заключалась в том, что, похоже, Chrome знает, что текст в ссылке не виден, и он помещает ссылку немного ниже, чем она должна быть (что-то вроде margin-top, но его невозможно изменить). Это происходит со всеми способами, которыми мы делаем текст невидимым: - линия-высота: 0; - шрифт-размер: 0; - текст-абзац:-9999px;

я смог исправить эту проблему, отрегулировав вертикальное выравнивание ссылки следующим образом:

vertical-align: 25px;

Я надеюсь, что это поможет

1

другой вариант-скрыть на основе bootstraps" sr-only " класс. Если вы обернете текст в промежуток с классом "sr-only", то текст не будет отображаться, но программы чтения с экрана все равно будут иметь к нему доступ. Так что вы бы:

<li><a href="somehwere"><span class="sr-only">Link text</span></a></li>

Если вы не используете bootstrap, все еще держите выше, но также добавьте ниже css, чтобы определить класс "sr-only":

.sr-only {position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0 0 0 0);  border: 0; }
1

просто нужно добавить font-size: 0; к элементу, который содержит текст. Это хорошо работает.

1

Я смог исправить эту проблему, установив размер шрифта: 0 .

-1

как о display: none;

что-нибудь скрывает.

-5