IE6, 7 down text-indent problem

The Text-indent property is used for text indentation, and more for hiding text. For example, a logo title, the above questions are artistic, have to combine the text and background into a background map (here page elements with a), but in the SEO considerations, need to put a inside of the text hidden, most of the method: text-indent:- 9999PX, but in IE6, 7, the background and text will be hidden, the reason for the analysis of the problem is that IE6, 7 and there is no real inline-block attribute, but by setting Display:inline-block triggered the layout of IE, So that the inline element has the Inline-block attribute of the table disease, The workaround :

Element{display:inline-block!important;display:block;}

IE6, 7 in all support! The important property only has a small bug at the end of the IE6, and subsequent properties overwrite the previous attribute (even if there is!). Important), but if the separate writing is perfect, as follows:

Element{display:inline-block!important;display:block;}

Element{display:inline;}

In this case (in order of precedence), IE6 is consistent with other browsers!

About implementing IE6, 7, Display:inline-block; Property methods:

Element{display:inline-block;*display:inline;zoom:1;}

This way, by using zoom to trigger the layout of IE, the inline element has the properties of the Inline-block attribute.

About IE6, 7, text-indent causes the Inline-block element to be offset or even disappear, the following solution is done:

1. Add Display:block; properties;

2. Add float:left|right; properties;

3. Remove Text-indent attribute, set font-size:0;line-height:0;

4. Set *text-indent:0;*line-height:300px; Note that this method should have a wide height setting overflow:hidden;

IE6, 7 down text-indent problem