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

HTML：

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

CSS：

.dashboard-edit,.dashboard-delete {
    height: 30px; width: 50px;
    background: url("http://s.ssacdn.com/insight/images/edit.png") no-repeat top left;
    text-indent: -9999px;
}

http://jsfiddle.net/FHUb2/

任何想法为什么？

解决方法

text-indent在内联元素上不起作用,< a>是一个内联元素,因此您可以定义display：block或display：inline-block to your< a>标签.

.dashboard-edit,.dashboard-delete {
    height: 30px; width: 50px;
    background: url("http://s.ssacdn.com/insight/images/edit.png") no-repeat top left;
    text-indent: -9999px;
    display:inline-block
}