利用 CSS 跨浏览器地隐藏文字一法。
作者：屈超（Chappell.Wat） 发布时间：August 13, 2010 分类：程式::五代
页面里使用 inline-block 元素时经常需要隐藏其文字，
比较流行的方法是将 line-height 的值设置得很大，
然后配合 overflow: hidden 来隐藏文字。
请容许我主观臆断地认为过大的行高会影响渲染效率，
而行高不够又可能在用户对页面进行放大操作时露出“马脚”（即未能被隐藏的部分）。
是否当 line-height:0 时对 Webkit 内核就没有办法了？
我想到利用透明文字来解决这一兼容问题，
并最终整理如下：
font-size:0; /* for firefox & opera */
color: transparent; /* for webkit */
line-height:0;
overflow:hidden; /* for IE */
自测后兼容的浏览器如下：
IE 6-8
Firefox 1-4
Opera 9-10
Safari 3-5
Chrome 1-6
如遇不兼容的情况可以留言。
当然隐藏文字的方法还有很多。
有人说“直接不填文字不就好啦”，
呃……
算我没说，
不过目前公司的产品对盲人阅读器的兼容还是有要求的。
用背景图片效果更好吧
收藏起来，以后遇到了，可以拿来用
[...]原文链接： http://www.quchao.com/entry/a-cross-platform-css-based-way-to-hide-text/[...]
[...]原文链接： http://www.quchao.com/entry/a-cross-platform-css-based-way-to-hide-text/[...]
網路就像一顆一顆小小的螺絲釘,才能顯現這份偉大! 新年快樂,站長加油!
刚才仔细弄了一下input下的submit背景图片按钮隐藏文字效果的css设置问题。。
发现以下问题：
如果按照博主的设置，ie6下按钮会不见，必须添加一个：display:block;设置，才可以正常。。
而且我反复的设置后发现：
display:block; line-height:0px; text-indent:-9999px; overflow:hidden;
可以完美的实现在Firefox和IE6下的正确兼容，实现效果，至于font-size:0px;也可以不设置，小虚线也不见了。。
个人觉得text-indent和overflow组合是最佳解决方法，针对这种小问题没必要去做那么复杂的各个浏览器兼容方式！而虚线问题其实可以忽略，除非你整个页面都是这种，但从用户体验上也就说不过去了！还是见仁见智！
@frogsky
负indent 法确实是很好的方法，
我也最常使用；
我这里也是为大家提供另一种思路。
：）
今天刚好做到这个inline-block的按钮在ie下没法用text-indent的方法。就用你这个试了下发现了两个问题：
1、chrome下会给元素带下一些margin-top
2、color:transparent对于一个a来说。要覆盖这个声明一般比较困难，需要提高不少优先级
最后还是决定改成display:block + text-indent实现吧：）
@catge
1. margin-top 是由本声明引起的？
2. 的确有这个问题！
为什么使用 inline-block 元素就要隐藏其文字？没试过用line-height来隐藏，我都是用text-indent:-9999px;overflow:hidden;
@baisohu
并不是一定要隐藏，
而是时常会利用它配合 Srpite 来实现行内小图标，
有时候从语义的角度来说确实还不如 IMG 。
我一般使用text-indent:-9999px;overflow:hidden;
问透明背景或颜色值能同理么，IE6支持就可以了
@Dpan
透明文字是针对 webkit 的 hack，
如果你前景和背景色一致，
视觉上确实是隐藏了 ，
但是文字也是可以被选中的。
当然如果你有这个需求则另当别论。
IE中的inline-block元素应用text-indent隐藏有bug
好东西 借鉴了
如何隐藏？不会！！！
有时感觉是不是简单的问题给复杂化了？ display:none;
还是习惯使用 text-indent: -10em; 这样
话说 CSS 的渲染效率问题还有待说明，目前觉得影响不大
@明城
恭喜你抢到沙发，
负 indent 在链接上会有虚线问题。
P.S. 我自己倒认为
“透明”的效率也不会高
@空空哥
indent 之后 overflow:hidden 就没虚线了
行高或者左右移动的值别射得太离谱应该还好吧
透明之后能被鼠标选中么？