text-indent以图换文字字隐藏文字

1612月

text-indent以图换文字字隐藏文字

以图换字是CSS布局中非常常用的一种手段，因为图片文字有时候比可选的文字的表达效果更好！
因此，某些文字标题是用图片来表达的。但写一个img标签实在不雅，为了照顾蜘蛛，我们使用浏览器障眼法。
于是用最常用的text-indent：

css:
Example Source Code
b a{background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png) left top no-repeat;width:300px;height:75px;text-indent:300px; white-space:nowrap; overflow:hidden;}

Xhtml:
Example Source Code
<b><a href=”#”>葡提子英文网站建设</a></b>

但你会发现，在IE6中，没有得到期望的效果，背景图片和文字都被隐藏了（IE7也是这样，其它的未做测试）。

解决办法至少有两个：
Example Source Code
1：将display:inline-block;改为display:block;
2：去掉display:inline-block;属性，加float:left;属性。

最终结果：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>text-indent以图换文字字隐藏文字</title>
<style type=”text/css”>
b a{display:block; background:url(http://www.onlygrape.com/images/logo.gif ) left top no-repeat;width:300px;height:75px;text-indent:300px; white-space:nowrap; overflow:hidden;}
</style>

</head>

<body>
<b><a href=”http://www.onlygrape.com/”>css网页布局w3c标准</a></b>
</body>
</html>