Как скрыть якорный текст, не скрывая якорь?

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

  • Link text
  •  

    Если 9X_max-height у меня есть фоновое изображение в теге a, как 9X_css-reset мне скрыть текст ссылки, используя только 9X_font-weight CSS? font-size: 0, похоже, отлично работает 9X_css с тегом a, кроме показа маленьких капель 9X_font-weight ie7.

    • Спасибо за помощь. Я использовал line-height: 0;, font-size: 0; и text-indent: -999px. Но в сафари по-прежнему появляются капли, есть идеи?

79
0
9
Общее количество ответов: 9

Ответ #1

Ответ на вопрос: Как скрыть якорный текст, не скрывая якорь?

Попробуйте

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


color: transparent; касается проблемы, связанной 9X_max-height с тем, что браузеры Webkit по-прежнему отображают 9X_css2 1 пиксель текста.

206
5

  • Спасибо за эту информацию. Эта информация помогла настроить специальные возможности в проекте, над кот ...

Ответ #2

Ответ на вопрос: Как скрыть якорный текст, не скрывая якорь?

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

20
0

Ответ #3

Ответ на вопрос: Как скрыть якорный текст, не скрывая якорь?

a { text-indent:-9999px; } 
Судя по моему опыту, работает хорошо.
9X_dynamic-css
17
2

  • Вы можете получить снижение производительности от Google, потому что вы говорите браузеру нарисовать прямоугольник шириной 9999 пикселей для каждого элемента, к которому он применяется. Лично вам ...

Ответ #4

Ответ на вопрос: Как скрыть якорный текст, не скрывая якорь?

Мини-совет:

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

My link text :after  

Я 9X_max-height скрыл текст с помощью font-size: 0, поэтому 9X_dynamic-css я мог использовать для него значок FontAwesome. Это 9X_css-layout работало в Chrome 36, Firefox 31 и IE9 +.

Я 9X_font-weight бы не рекомендовал color: transparent, потому 9X_inline-block что текст все еще существует и его можно 9X_css-layout выбрать. Использование line-height: 0px 9X_font-weight не позволило мне использовать: after. Может 9X_css-classes быть, потому что мой элемент был встроенным 9X_max-height блоком.

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

text-indent: -9999px;: также 9X_font-weight перемещен элемент: after

6
1

  • да, у меня тоже была пробл ...

Ответ #5

Ответ на вопрос: Как скрыть якорный текст, не скрывая якорь?

text-indent :-9999px 
Работает безупречно.
9X_css-classes
5
0

Ответ #6

Ответ на вопрос: Как скрыть якорный текст, не скрывая якорь?

Другой вариант - скрыть на основе начальной 9X_min-height загрузки класса "sr-only". Если вы поместите 9X_box-model текст в диапазон с классом «sr-only», то 9X_min-height текст не будет отображаться, но программы 9X_font-weight чтения с экрана по-прежнему будут иметь 9X_dynamic-css к нему доступ. Итак, у вас будет:

  • Link text
  •  

    Если вы 9X_css-classes не используете начальную загрузку, сохраните 9X_css-reset указанное выше, но также добавьте приведенный 9X_max-height ниже CSS для определения класса "только 9X_css-columns для sr":

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

3
0

Ответ #7

Ответ на вопрос: Как скрыть якорный текст, не скрывая якорь?

Просто нужно добавить font-size: 0; к вашему элементу, содержащему 9X_box-model текст. Это хорошо работает.

3
0

Ответ #8

Ответ на вопрос: Как скрыть якорный текст, не скрывая якорь?

Я следил за лучшим ответом Локтара, и он 9X_inline-block сработал очень хорошо. Единственная проблема 9X_inline-block была с Chrome (моя текущая версия - 27.0.1453.94 9X_dynamic-css м). Проблема, с которой я столкнулся, заключалась 9X_css2 в том, что, похоже, Chrome знает, что текст 9X_css в ссылке не виден, и помещает ссылку немного 9X_max-height ниже, чем она должна быть (что-то вроде 9X_inline-block margin-top, но это невозможно изменить ). Это 9X_box-shadow происходит со всеми способами, которыми 9X_font-weight мы делаем текст невидимым: - высота строки: 0; - font-size: 0; - отступ 9X_css-reset текста: -9999 пикселей;

Мне удалось решить 9X_min-width эту проблему, отрегулировав выравнивание 9X_inline-block ссылки по вертикали следующим образом:

vertical-align: 25px; 

Надеюсь, это 9X_min-width будет полезно

1
0

Ответ #9

Ответ на вопрос: Как скрыть якорный текст, не скрывая якорь?

Вы можете поместить изображение в псевдоэлемент 9X_inline-block :: before и установить те же размеры, что 9X_box-model и изображение + добавить overflow: hidden, например:

li a::before{ content:url('img'); width:20px; height:10px } a { overflow:hidden; width:20px; height:10px } 

1
0