CSS Hack Technology

First we need to understand a concept CSS hack

Different browsers, such as IE6, IE7, Ie8,mozilla Firefox, and so on, the support and parsing results of CSS are different, so it will result in the same page generated by the same effect.

At this point we need to define different CSS for different browsers, so that it can be compatible with different browsers at the same time, in different browsers can also get the desired page effect.

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

The principle of CSS hack: Because of the different browser support and parsing results of CSS and the relationship between the precedence of CSS, we can be based on this to different browsers to write different CSS.

Like what:

IE6 can recognize the underscore "_" and the asterisk "*",

IE7 can recognize the asterisk "*", but does not recognize the underscore "_",

And two of Firefox can not know.

For example, we usually encounter the following wording:

. side_col {float:left; display:inline; margin-left:20px;}

and in order to adapt to IE6 is:

. side_col {float:left; margin-left:20px;}

*. side_col {_display:inline;/*hacked for IE 6*/}

Another example:

Id= "bgcolor" controls to show blue in IE6, green in IE7, and red in other browsers such as Firefox

. #bgcolor {background:red!important; */* Firefox and other browsers */background:blue;/* IE6 */}*+html #bgcolor {background:green! Important /* IE7 */}ie6 do not recognize!important, also do not recognize *+html. So IE6 can only be blue. IE7 recognized!important, also recognized *+html, priority: (*+html +!important) >!important > +html. IE7 can be red, blue and green, but Green has the highest priority. Firefox and other browsers all recognize!important. !important priority, Firefox can be red and blue, but Red has a high priority.

CSS Hack Technology