{text-indent：-9999}图像替换不起作用

Question

你知道为什么吗？

http://jsfiddle.net/FHUb2/

​

.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不适用于内联元素，而<a>是一个内联元素，因此您可以为<a>标记定义display:block或display:inline-block。

​

.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 2

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

因此，请确保您的元素已使用text-align:left进行设置以修复此问题。

Answer 3

<a/>标记不是“块”

添加以下内容：

display: inline-block;