星期一, 1月 18, 2010

CSS技巧:圖片替代文字,並將文字隱藏

正常在隱藏文字只要於CSS當中以text-indent:-9999px;將文字移到視窗之外即可。
但最近遇到的狀況是,當文字位於表格之內時,通常就會失效。
而且FF與IE的解法不同。
我的作法如下:

for FireFax
.icon_keyword { background: url(btn_help.gif) left center no-repeat; width:50px; height:16px; display: inline-table; text-indent:-9999px;}

for IE6
* html .icon_keyword { background: url(btn_help.gif) left top no-repeat; width:50px; height:16px; display: inline-block; text-indent:-9999px;}

for IE7
*:first-child+html .icon_keyword { background: url(btn_help.gif) left top no-repeat; width:50px; height:16px; display: inline-block; text-indent:-9999px;}

主要是在FF,他不吃display: inline-block;,反而要用display: inline-table;
而IE不認得display: inline-table; ,但display: inline-block;,卻可執行。
張貼留言