{text-indent: -9999} для замены изображения не работает

Ответ 1

text-indent не работает со встроенными элементами, а <a> является встроенным элементом, поэтому вы можете определить display:block или display:inline-block для вашего тега <a>.

.dashboard-edit,
.dashboard-delete {
  height: 30px;
  width: 50px;
  background: url("https://i.stack.imgur.com/kRZeB.png") no-repeat top left;
  text-indent: -9999px;
  display: inline-block;
}

<a href="#" title="Edit" class="dashboard-edit">Edit</a>
<a href="#" title="Delete" class="dashboard-delete">Delete</a>

Ответ 2

Кроме того, что text-indent не работает с встроенными элементами. Другая причина заключается в том, что ваш элемент или один из его родительских элементов был установлен с помощью text-align:right

Итак, убедитесь, что ваш элемент установлен с помощью text-align:left, чтобы исправить это.

Ответ 3

<a/> теги не являются "блоками"

добавить следующее:

display: inline-block;

Ответ 4

В моем случае текстовый отступ не работал над H1 из-за: перед псевдотеком я исправлял проблему фиксированного позиционирования заголовка

.textpane h1:before, .textpane h2:before, .textpane h3:before {
  display:block;
  content:"";
  height:90px;
  margin:-90px 0 0;
}

Это применительно к элементам H1 с отрицательным отступом взлома показало текст поверх изображений в FF и Opera

Ответ 5

Имейте в виду, что (если вам интересно) с встроенным блоком технология замены текста с отступом не работает в IE7. У меня недавно было чертовски время понять, что один из них. Я использовал этот метод для IE7, и он работает:

.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

Ответ 6

У меня была такая же проблема, я проверил отображение и выравнивание текста. наконец, я узнаю.

Я работал над дизайном rtl и в теме изменилось направление на rtl.

Вы можете изменить контейнер или каждый элемент на ltr, чтобы устранить проблему.

dashboard-edit, .dashboard-delete { 
    direction: ltr;
}