When INLINE-BLOCK and TEXT-INDENT encounter IE6, IE7

The code is as follows:

Copy code

# Iconautente { Background-image: url ('/style/images/spritecommon.png');/* icona_utente.png */ Background-position:-117px-15px; Text-indent:-9000px; Width: 20px; Height: 23px; Display: inline-block; } <A id = "iconautente" href = "/admin/index. php tutorial"> admin </a> In Firefox, IE7 and IE8 under Vista, I see background and no text, as expected. in IE6 and IE8 under XP, the whole image is indented, not text, so the image is not shown.

When creating a button, because the text of the button is too artistic, it is sliced directly with the background, but the SEO considers that the corresponding text is added to the tag,
<P> <a href = "filepath" class = "icon-pdf"> Download PDF </a> </p>
The general CSS is as follows:

The code is as follows:	Copy code
. Icon {display: inline-block; width: 16px; height: 16px; text-indent:-9999px ;} . Icon-pdf {background-image: url().png );}

Well, in FF, Chrome IE8, and XXX mainstream browsers, the display is perfect. The disgusting reason is that I forgot to read it in IE6 and 7...
Well, a few days later, I tested how the float button disappears in IE6 and 7. At that time, I opened the browser with inertia, started the debugging tool, and finally found a solution, the style is adjusted as follows:

The code is as follows:	Copy code
. Icon {display: block; width: 16px; height: 16px; text-indent:-9999px} Or . Icon {display: inline-block; width: 16px; height: 16px; font-size: 0; line-height: 0 ;}

Or modify your html as follows:
<P> & nbsp; <a href = "filepath" class = "icon-pdf"> Download PDF </a> </p>
Add & nbsp; and so on before the tag...
The inline or inline-block element sets the text-indent to display an abnormal bug in IE6/IE7. As a result, text-indent is passed to the parent and element, and the above result is displayed.
The reason for this is that IE6/IE7 does not actually implement inline-block, but triggers layout of IE by setting display: inline-block, so that the inline element has the inline-block attribute.
Check the default style of the element. We can see that the default display of input, select, button, and textarea is inline-block, so pay attention to the layout...

The code is as follows:	Copy code
* Html # iconautente {text-indent: 0; line-height: 0; font-size: 0; overflow: hidden}/* ie6 hack */ *: First-child + html # iconautente {text-indent: 0; line-height: 0; font-size: 0; overflow: hidden}/* ie7 hack */

Test the inline-block support of various browsers. The results are as follows:

IE6, 7, and IE8 in compatible mode are not fully supported. Only valid for elements with inline layout by default
Support for IE8, FF, Safari, Chrome, and Opera

In this case, the code given above should be well distributed in the mainstream browsers. However, the test results show that in IE6, 7, and compatible mode, the button is left blank, but it can be seen that it occupies a certain position on the page.

The problem lies in text-indent. The test result shows:

Offset the element to the left when text-indent is negative
When text-indent is set to a timing value, the element is shifted to the right.
In this case, the offset of the element is determined by the text-indent and margin values, such as: margin-left:-10px; text-indent: 10px is equivalent to margin-left: 0; text-indent: the 0 element has no offset, so what is the solution?

The simple solution is not to use inline-block in IE6 or 7. For example, set display: inline-block! Important; display: block;, IE6, 7 don't know! Important. In this way, IE6 and 7 are rendered as a block-level element, while other browsers are displayed as inline-block elements.

This problem occurs when inline-block and text-indent are met. Will this problem occur to other elements? Check the default style of the element. We can see that the default display of input, select, button, and textarea is inline-block. The code is as follows:

The code is as follows:	Copy code
<Style type = "text/css tutorial"> Div {border: 4px solid blue ;} Button { Width: 100px; Height: 24px; Border: medium none; Background: red; Text-indent: 20px; Text-align: left; Padding: 0; } </Style> <Div> <button> I am a button </button> </div>