CSS技巧：text-indent隱藏文字(以圖換字)_DIV+CSS實例
教程Tag：暫無Tag,歡迎添加,賺取U幣!
以圖換字是CSS布局中非常常用的一種手段，因為圖片文字有時候比可選的文字的表達效果更好！
因此，某些文字標題是用圖片來表達的。但寫一個img標簽實在不雅，為了照顧蜘蛛，我們使用瀏覽器障眼法。
于是用最常用的text-indent：
css:
Xhtml:
但你會發現，在IE6中，沒有得到期望的效果，背景圖片和文字都被隱藏了（IE7也是這樣，其它的未做測試）。
解決辦法至少有兩個：
最終結果：
[ 可先修改部分代碼 再運行查看效果 ]
本文作者：silence
因此，某些文字標題是用圖片來表達的。但寫一個img標簽實在不雅，為了照顧蜘蛛，我們使用瀏覽器障眼法。
于是用最常用的text-indent：
css:
示例代碼 [www.wf0088.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.wf0088.com]
<h4><a href="#">css網頁布局w3c標準</a></h4>
但你會發現，在IE6中，沒有得到期望的效果，背景圖片和文字都被隱藏了（IE7也是這樣，其它的未做測試）。
解決辦法至少有兩個：
示例代碼 [www.wf0088.com]
1： 將display:inline-block;改為display:block;
2：去掉display:inline-block;屬性，加float:left;屬性。
2：去掉display:inline-block;屬性，加float:left;屬性。
最終結果：
代碼調試框 [www.wf0088.com]
[ 可先修改部分代碼 再運行查看效果 ]
本文作者：silence
相關DIV+CSS實例：
- 相關鏈接：
- 教程說明：
DIV+CSS實例-CSS技巧：text-indent隱藏文字(以圖換字)
。