Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to analyze the usage of CSS hack for IE6, which may not be well understood by many people. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something from this article.

Through an example to describe the CSS hack usage of IE6, we take a LOGO as an example to explain the effect of applying CSS HACK setting to IE6, which is different from IE7 and FF.

An example of CSS hack usage for IE6

The compatibility of CSS page layout has been bothering everyone all the time. In fact, there are rich articles on CSS HACK and CSS compatibility in previous 51cto.com articles, but some articles may be abstract and not instantiated, which is not convenient for everyone to understand.

Now I'm going to talk about the use of CSS HACK for IE6. We take a LOGO as an example to explain the effect of applying CSS HACK settings to IE6, which is different from IE7 and FF. Let's look at the following HTML code:

ExampleSourceCode

I love CSSCSSWebDesign-Web standardized Div+css tutorials

This is a LOGO element that is organized using the H3 tag, while the LOGO image is defined in the CSS background image.

Look at the following CSS code:

ExampleSourceCode

Body {margin:0; padding:0;} h4 {margin:50pxauto; width:450px;height:60px; padding:5px; border:1pxdotted#03c;} h4a {display:block; width:450px;height:60px; text-indent:480px; white-space:nowrap; background:url (logo.jpg) no-repeat00; overflow:hidden;}

Style BODY and H3. Place the LOGO picture in the link element below the H3 tag. We open it and see that the effect is as follows:

If we open IE6 again, we will get the following results:

The dotted line is not so beautiful, it looks very rough, what should we do at this time? We can make CSS HACK settings for IE6 browsers to define how different looks appear under IE6.

We make adjustments to the CSS code:

ExampleSourceCode

Body {margin:0; padding:0;} h4 {margin:50pxauto; width:450px;height:60px; padding:5px; border:1pxdotted#03c;} h4a {display:block; width:450px;height:60px; text-indent:480px; white-space:nowrap; background:url (logo.jpg) no-repeat00; overflow:hidden;} * htmlh4 {border:1pxsolid#03c;}

Please pay attention to the writing of the bottom CSS code. The selector "* htmlh4" is applied. And "* html" is the CSS HACK selector for IE6 and the following browsers. We open IE6 again and get the following effect:

In IE7 and FF, dotted lines are beautiful, while under IE6, they are displayed directly as solid lines.

We can take an example and try to define different properties such as outer margins or background images to view them.

After reading the above, do you have any further understanding of how to parse the use of CSS hack for IE6? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.