textindent: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是将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

原文地址:https://www.cnblogs.com/Mainz/p/text_indent_css_inline_block.html