{text-indent：-9999}图片替换不工作 [英] {text-indent : -9999} for image replace not working

问题描述

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：或 display：inline-block < a> 标签。

text-indent does not work on inline elements and <a> is an inline element so you can define display:block or display:inline-block to your <a> tag.

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

这篇关于{text-indent：-9999}图片替换不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！