如何在不隐藏锚点的情况下隐藏锚文本

Question

说我有以下标记:

<li><a href="somehwere">Link text</a></li>

如果我在a标签上有背景图像,我将如何使用css隐藏链接文本？font-size:0似乎在一个标签上工作正常,除了ie7小blob显示.

谢谢

感谢您的帮助到目前为止iv使用line-height:0; 和font-size:0; 和text-indent:-999px; 但它仍然出现在野生动物园的一些斑点,任何想法？

Answer 1

尝试

 a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }

将color: transparent;涵盖与WebKit浏览器仍显示文本的1px的一个问题.

Answer 2

在一个范围中包装文本并设置visibility:hidden;隐藏的Visibility将隐藏元素,但它仍将占用页面上的相同空间(相反显示:none也会从页面中删除它).

Answer 3

a { text-indent:-9999px; }

倾向于从我的经验中运作良好.

您可能会受到Google的性能影响,因为您告诉浏览器为每个应用的元素绘制宽度为9999px的框.就个人而言,你最好应用一个显示器:none,visibility:hidden,font-size:0,或类似的东西,以避免Google不尊重你的过度扩展布局方案的"可能性".我也用这种方式编码,但我停了下来.来源 - http://stackoverflow.com/questions/8971152/is-text-indent-9999px-a-bad-technique-for-replacing-text-with-images-and-what (7认同)
这也打破了 Firefox 上的“大纲”。轮廓矩形将从浏览器视口的左侧开始。 (2认同)

Answer 4

text-indent :-9999px

完美运行。

Answer 5

迷你小贴士:

我有以下情况:

<a href="/page/">My link text
:after
</a>

我用font-size:0隐藏了文本,所以我可以使用FontAwesome图标.这适用于Chrome 36,Firefox 31和IE9 +.

我不建议使用color:transparent,因为文本stil存在且可以选择.使用line-height:0px不允许我使用:after.也许是因为我的元素是一个内联块.

可见性:隐藏:不允许我使用:之后.

text-indent:-9999px; :还移动了:after元素