A brief talk on CSS hack

What is CSS hack?

Because of different browsers, such as Internet Explorer 6,internet Explorer 7,mozilla Firefox and so on, the interpretation of the CSS is not the same, so will result in the resulting page effect is not the same, we need the page effect.

This time we need to different browsers to write different CSS, so that it can be compatible with different browsers, in different browsers can also get the page effect we want.

The process of writing different CSS code for different browsers is called CSS hack, also called writing CSS hack.

What is the principle of CSS hack

Because of the different browsers to the CSS support and resolution results, but also due to the priority of the CSS in the relationship. We can write different CSS for different browsers according to this.

For example, IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but do not recognize the underscore "_", and Firefox two can not know. Wait a minute

The writing order is usually to write the CSS of the browser with strong recognition ability in the back. Here's how to write it in more detail.

How to write CSS Hack

For example, to distinguish IE6 and Firefox two browsers, you can write this:

<style>

div{

Background:green; * For Firefox/*

*background:red; /* for IE6 * *

}

</style>

I see in the IE6 is red, see in Firefox is green.

Explain:

The above CSS in Firefox, it is not know what is behind that with an asterisk, so it filtered out, ignored, the result of the analysis is: Div{background:green}, so it is natural that the div background is green.

In IE6, it can be identified in two background, and it resolves the result: div{background:green;background:red, and then, according to the priority, the higher priority of red at the back, So of course the background color of this div is red.

CSS hack: Distinguishing Ie6,ie7,firefox

Differences between different browsers, CSS hack writing:

Difference IE6 with FF:

Background:orange;*background:blue;

Distinction between IE6 and IE7:

Background:green!important;background:blue;

Difference IE7 with FF:

Background:orange; *background:green;

Difference ff,ie7,ie6:

Background:orange;*background:green;_background:blue;

Background:orange;*background:green!important;*background:blue;

Note: IE can recognize *; standard browsers (such as FF) cannot recognize *;

IE6 can recognize *, but cannot recognize!important,

IE7 can recognize the *, also can identify!important;

FF does not recognize *, but can identify!important;

IE6 IE7 FF

*√√x

!importantx√√

Browser priority: Ff<ie7<ie6,css hack Writing order is typically FF IE7 IE6

　　to : "#demo {width:100px;}" as an example ;

　　#demo {width:100px}/* was Firefox,ie6,ie7 Perform .*/

　　* HTML #demo {width:120px}/ * will be IE6 Perform , The previous definition will be overwritten later. , so #demo the width in IE6 Just for 120px; *

　　*+html #demo {width:130px}/* will be IE7 Perform */

　　---------------

so in the end , #demo The width of the three browsers in the explanation for :

　　firefox:100px;

　　ie6:120px;

　　ie7:130px;