利用text-indent在a标签时的问题

在做一个按钮时遇到这个问题。发现情况原来是这样,记录一下。利用text-indent在a标签时的问题,只能换种方法来隐藏文字了。

通常偏移掉字体的方式是使用text-indent:-9999px;可是有一个局限性 只适用于块级元素block。
而我们往往有时候想偏移掉的a上的字体,所以问题就来了,text-indent:-9999px;虽然用起来比较惬意,将a转化成block的话,往往它身后的的元素就被他赶到下一行了。
如果正好这个a后面 是一个a按钮
就要用float来浮动以使他身后再出现簇拥者

这样是不是有些麻烦呢
所以推荐使用
line-height:0;
font-size:0;
overflow:hidden;
能完美“隐藏”掉你background之上的字体
经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过

参考:http://www.52css.com/article.asp?id=1061

合理隐藏文字

一般我们显示艺术性文字是使用图片替换文字的方法
绝大部分网站都是使用直接隐藏掉文字的方式:

html
<style>
.logo{
	display:block;
	height:31px;
	width:30px;

	text-indent:-999px;
	background:#464646 url(http://www.vfresh.org/wp-admin/images/wp-logo.gif) no-repeat;
}
</style>
<a href="#" class="logo">vfresh.org</a>

这样,我们成功的隐藏了文字,并且在css未能加载时能正常显示文字。

但是在成功加载css后,如未能成功加载图片或者图片加载得很慢,这个部分都会显示一片空白。

为了避免这个问题,我们可以使用一个空白标签(如)浮动于文字上层并填充图片
同时我们可以对文字层格式化,使之接近于图片的显示效果。
这样在图片没有显示出来之前,都由文字这个强力后备顶着!~

html
<style>
.christmas {
	position:relative;
	width:304px;
	height:149px;
	line-height:25px;
	background:#1E3151;
	color:#CCE8F3;
	font-size:14px;
}
.christmas span {
	position:absolute;
	top:0;
	left:0;
	display:block;
	height:100%;
	width:100%;
	background:url(http://www.vfresh.org/wp-content/uploads/2009/12/bestwish.jpg) no-repeat;
}
</style>
<div class="christmas">
	Best Wishes for Christmas & the New Year!
	<span></span>
</div>

但这样做的缺点是:
1.需要一个填充图片的标签,需要更多的选择器来进行样式控制。
2.图片加载完成时替换掉文字的视野时,会有所突尤。

但为了让用户更快的预览到信息,这点缺点,在必要的时候确是大可忽略的,特别是游戏站点。