CSS技巧：text-indent隐藏文字(以图换字)_DIV+CSS实例
教程Tag：暂无Tag,欢迎添加,赚取U币!
以图换字是CSS布局中非常常用的一种手段，因为图片文字有时候比可选的文字的表达效果更好！
因此，某些文字标题是用图片来表达的。但写一个img标签实在不雅，为了照顾蜘蛛，我们使用浏览器障眼法。
于是用最常用的text-indent：
css:
Xhtml:
但你会发现，在IE6中，没有得到期望的效果，背景图片和文字都被隐藏了（IE7也是这样，其它的未做测试）。
解决办法至少有两个：
最终结果：
本文作者：silence
因此，某些文字标题是用图片来表达的。但写一个img标签实在不雅，为了照顾蜘蛛，我们使用浏览器障眼法。
于是用最常用的text-indent：
css:
示例代码 [www.mb5u.com]
h4 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:
示例代码 [www.mb5u.com]
<h4><a href="#">css网页布局w3c标准</a></h4>
但你会发现，在IE6中，没有得到期望的效果，背景图片和文字都被隐藏了（IE7也是这样，其它的未做测试）。
解决办法至少有两个：
示例代码 [www.mb5u.com]
1： 将display:inline-block;改为display:block;
2：去掉display:inline-block;属性，加float:left;属性。
2：去掉display:inline-block;属性，加float:left;属性。
最终结果：
代码调试框 [www.mb5u.com]
本文作者：silence
相关DIV+CSS实例：
- 相关链接：
- 教程说明：
DIV+CSS实例-CSS技巧：text-indent隐藏文字(以图换字)
。