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

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对内联元素不起作用的原因.另一个原因是你的元素或其父元素之一已被设置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/> 标签不是'块'

添加以下内容:

display: inline-block;

Answer 4

在我的情况下,文本缩进不适用于H1,因为:在伪标签之前,我用来纠正固定的标头定位问题

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

这适用于具有负缩进黑客的H1元素,在FF和Opera的图像上显示文本