CSS hide text

Develop as a Web Front-end
To make HTML semantic
You often need to add titles to the content module to make the page more meaningful.
Of course, there are our image buttons.
The page information can be smoothly obtained without leaving CSS streaking.
Generally, to deliver better visual effects
We often use images to replace fonts.
Earlier front-end development often did not provide content directly in HTML.
Use & nbsp; (or even empty)
In this way, you cannot know what the block is when it is not loaded to CSS.

Start
Which of the following methods is usually used to offset the font?

(1)
Use text-indent:-9999px;

However, he has a limitation that he only applies to block-level element blocks.
And sometimes we want to offset the font on.
So the question comes.
Text-indent:-9999px; although easy to use
If a is converted into a block, the elements behind him will be pushed to the next line.
If a is followed by a button
Float will be used to float to bring people behind him
Is it a little troublesome?

(2)
Line-Height: 0;
Font-size: 0;
Overflow: hidden;

Can "hide" the font above your background perfectly
Ie6.0, 7.0, 8.0, and Firefox 3.010 passed the test.

(3)
The most convenient thing is to add a span and then display: None, without any bugs.
Unfortunately, when multiple tags are added and used in a loop, a bunch of bytes are added to HTML. We recommend that you use a single button.

however, it is difficult to hide the input value.
you can only use block and text-indent to simulate and hide the offset.
display: block;
font-size: 0;
line-Height: 0;
text-indent:-9999px;
ie6.0, 7.0, and Firefox 3.010 passed the test