CSS text indent not working on IE7

Here is the sample page: http://jsfiddle.net/p9Fbb/

Basically, when using text-indent on the icon, Internet Explorer 7 (IE9 in Compatibility Mode) moves the element off-screen, not just the text. For some reason, this only happens in certain circumstances 开发者_如何学Pythonin table cells (I think it's when the element is on its own in a cell).

How can I fix this? Or is there another way to use textual content in an element but keep it invisible?

It seems that the problem is that your span become empty (or it's size become 0 (not sure)) after the text-indent, ence it's not displayed. Put text around your span, you'll see it's still there.

see this jsFiddle for an example.

use display:block instead of display:inline-block. Inline-element do not like size declaration much (width/height), they are made to be displayed inside something, taking room according to their content.