html - 使用文本缩进保持背景图像到位

Question

我在 <div> 中有以下 html :

<span class="footer-icons">
    <a href="#;" class="facebook" title="Facebook">Facebook</a>
    <a href="#;" class="twitter" title="Twitter">Twitter</a>
</span>

还有我的 CSS:

#footer .footer-icons {
    float: right;
    margin-right: 10px;
}
#footer .footer-icons {
    text-indent: -9999px;
}
#footer .footer-icons .facebook {
    background: url("../images/new/footer-icons.png");
}

问题在于 text-indent导致背景图像也移动。我如何才能做到“转义文本”(例如，使用文本缩进:-9999px)并保持背景图像不变？

Answer 1

这是工作 fiddle :http://jsfiddle.net/surendraVsingh/qdFNM/5/ (更新)

添加 display:inline-block 并为该 div 指定与图像相同的宽度和高度。

CSS

.footer-icons {
    margin-right: 10px;
}
.footer-icons {
    text-indent: -9999px;
}
.footer-icons .facebook {
    background: url("https://dl.dropbox.com/u/19982181/fab/fb.jpg") no-repeat left top ;
    width:20px; height:20px;
    display:inline-block;
}
.footer-icons .twitter {
    background: url("https://dl.dropbox.com/u/19982181/fab/tw.jpg") no-repeat left top ;
    display:inline-block;
    width:20px; height:20px;
}