Example to parse a CSS hack usage for IE6

This article through an example to you describe IE6 CSS hack usage, we take a logo as an example, explained to IE6, the application of CSS hack settings are different from the IE7 and FF effect. The specific content please see this article detailed introduction, believed this article introduction certainly will let you have the harvest.

An example of CSS hack usage for IE6

CSS page layout of the compatibility problem has been puzzling everyone, in fact, in 51cto.com before the article also has a rich CSS hack and CSS compatibility of the article, but some articles may speak more abstract but not instantiated, not easy to understand.

Now we're going to talk about the use of CSS hack for IE6. We use a logo as an example to explain the effect of applying CSS hack settings as distinct from IE7 and FF for IE6. Let's look at the following HTML code:

Examplesourcecode

 
 <h3>
<ahrefahref = "http://www.51cto.com/">
I love CSSCSSWebDesign-Web Standardization Div + css Tutorial </a>
</ h3> 

This is a logo element that is organized using H3 tags, while logo images are defined in CSS background images.
Look at the following CSS code:

Examplesourcecode

body{
margin:0;
padding:0;
}
h3{
Margin:50pxauto;
width:450px;
height:60px;
padding:5px;
border:1pxdotted#03c;
}
h3a{
Display:block;
width:450px;height:60px;
text-indent:480px;
White-space:nowrap;
Background:url (logo.jpg) no-repeat00;
Overflow:hidden;
}

Sets the style of body and H3. Place the logo picture in the link element below the H3 label. We opened the check to see the effect as follows:

We then open the IE6 view and get the following effect:

The dotted line is not so beautiful, it looks very rough, what should we do then? We can make CSS hack settings for IE6 browsers, and define them in IE6 to show different skins.

We make adjustments to CSS code:

Examplesourcecode

body{
margin:0;
padding:0;
}
h3{
Margin:50pxauto;
width:450px;
height:60px;
padding:5px;
border:1pxdotted#03c;
}
h3a{
Display:block;
width:450px;height:60px;
text-indent:480px;
White-space:nowrap;
Background:url (logo.jpg) no-repeat00;
Overflow:hidden;
}
*htmlh3{
border:1pxsolid#03c;
}

Note how the following CSS code is written. The selector "*HTMLH3" has been applied. and "*html" is for IE6 and the following browser CSS hack selector. Once again, we turned on the IE6 view and got the following effect:

In IE7 and FF, the dotted line is beautiful, but underneath the IE6, it is shown directly in solid lines.

We can extrapolate, try to define attributes such as different margins or background pictures, and view them. In the actual development, to these CSS hack should be very flexible, we should think more, have experience, welcome to 52css.com share with you.

"Edit Recommendation"