Question

I see lot of times attempts to hide text with CSS, for instance:

<a class="back">back</a>    
a.back { text-indent: -9999px; display:block; width: 100px; height: 50px; background: url(/images/back.png); }

I always wonder why not to use:

a.back { color: transparent; display:block; width: 100px; height: 50px; background: url(/images/back.png); }

It seems to me semantically correct, and in addition, when I tried the text-indent approach, it caused a bug in iPad display: The text was displayed 99999px left to the anchor tag and caused a strange unnecessary horizontal scroll.
Is there a common known problem with the second code or it’s OK to use?

Answer 1

font-size: 0px; should do the trick.
If you want to make the button smaller than the text, you’ll also need to add line-height: 1em; or something similar.