Text-indent:-9999px why is the hidden text invalid?

The background is used to display the image. To hide the text, set text-indent:-9999px. Why is it ineffective?

< 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;}

 

The original problem lies in the display: inline,Text-indent is effective only for blocks, table cells, and inline blocks, and text-align: Left. It has no effect on inline elements.

Change to display:Inline-blockSolve the problem.

Unfortunately, browsers have poor support for inline-block, such as firefox3, IE8, and opera and safari.

ie6. IE7 seems to have some effect, but using display: inline-block in IE triggers layout (if you are unfamiliar with layout, see the on having layout translated by old9) to enable inline elements to be characterized by the display: inline-block attribute. Inline-block is used to present an object as an inline object, but the content of the object is presented as a block object. The Inline object next to it will be presented in the same row and spaces are allowed.