Question

任何想法为什么？

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

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

Answer 1

除了text-indent不适用于内联元素的原因。另一个原因是，如果您的元素或其父元素之一已设置为text-align:right

因此，请确保您的元素已设置为text-align:left以解决此问题。

Answer 2

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>

Answer 3

<a/>标签不是'block'

添加以下内容：

display: inline-block;

Answer 4

在我的情况下，文本缩进不适用于H1，原因是：在伪标签之前我用来纠正fixed header positioning problem

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

这适用于具有负缩进黑客的H1元素，在FF＆amp;中的图像顶部显示文本。戏

Answer 5

请记住（如果您关心）使用内联块，文本缩进图像替换技术将在IE7中失败。我最近有一点时间搞清楚那一个。我在IE7上使用了这种技术，它可以工作：

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

Answer 6

我有同样的问题，我检查了显示和文本对齐。最后我发现了。

我正在研究rtl设计，在主题中方向改为rtl。

您可以将容器或每个元素更改为ltr以解决问题。

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

{text-indent：-9999} for image replace not working

6 个答案: