text-indent:-9999px隐藏文字为何失效?

用背景background来显示图片，需要隐藏文字，设置text-indent:-9999px;为何没有效果？

< div  class ="remksz msstar"  title ="good" > abcdefghi </ div >

css:

.remksz  {} {height:12px;width:64px;display:inline; margin-right:10px; text-indent:-9999px; vertical-align:middle;}
.msstar  {} {background:transparent url(images/remark.gif) no-repeat scroll 0 -84px;}

 

原来问题出在display:inline;上，Text-indent 仅仅对 block, table cells, inline block才有效果，而且text-align:left;才有效果。对inline的元素没有效果。

改为display:inline-block；问题解决。

可惜浏览器对inline-block的支持不好，Firefox3，IE8支持，Opera、Safari也支持，其他的就不支持了。

IE6. IE7下使用貌似会有些效果，但其实使用display:inline-block在IE下会触发layout（如果你对layout感觉到陌生，可以参看old9翻译的《On having layout》），从而使内联元素拥有了display:inline-block属性的表征。inline-block是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。