Overflow and text-indent:-9999px font concealment and input value offset

Core tip:overflow and text-indent:-9999px font concealment and input value offset

As a Web front-end development

For HTML semantics

It is often necessary to add some headings to the content module to make the page more meaningful

And, of course, our picture buttons.

In the case of the naked run of CSS can also be very smooth to draw the page information

Usually in order to convey a better visual effect

We use pictures instead of fonts.

Earlier front-end development is often directly not in the HTML to give the content

to use; (even empty)

This will not be able to know what the block is when it is not loaded into the CSS.

Start the business.

Usually the way to offset the font is

Use of text-indent:-9999px;

But he has a limitation. He only applies to block-level element blocks

And we sometimes want to offset the font on a

So here's the problem.

TEXT-INDENT:-9999PX, although it is more comfortable to use

By converting a to block, the elements behind him are often taken to the next line.

If it happens to be a a button behind this a

float in float to bring the crowd behind him.

Is this a little messy?

So the recommended use

line-height:0;
font-size:0;
Overflow:hidden;

The perfect "Hide" the font above your background.

Tested ie6.0, 7.0, 8.0, Firefox 3.010 through

And the way to hide the input value is a bit hard.

So you can only use block plus text-indent to "offset" the simulation to hide

Display:block;
font-size:0;
line-height:0;
text-indent:-9999px;

Tested ie6.0, 7.0, Firefox 3.010 through