CSS hack principle

Recently read a few articles about CSS hack, feel good to tidy up a bit.

CSS hack Many people do not understand its principle, in fact, we all know that for different browsers, CSS parsing degree is not the same, it will lead to the resulting page effect is not the same, especially for IE, the snake disease browser, At this time we need to write different CSS for different browsers (especially IE), this process is called CSS hack. Instead of that hack, it can be said that CSS hack is a kind of "curve salvation" strategy which is compatible with the different rules and standards of different browsers. Nonetheless, we want the world to be in harmony, with a unified standard to unify the browser specification T T

The main basis of CSS hack is

1. Browser support for CSS and parsing results are not the same;

The relationship of precedence in 2.CSS.

Commonly used CSS hack there are three ways, CSS internal hack, selector hack, HTML header reference, the first of the most commonly used.

A.CSS internal hack:

CSS internal hack syntax is such a selector{?property:value?} such as IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but do not recognize the underscore "_", and Firefox two do not know. For the relationship of writing order, it is generally written in the back of the CSS of the browser with strong recognition ability.

<style> div{      background:green;/*forfirefox*/      *background:red;/*forie6 ie7*/}  </style>

In this way, the success of the ie6,7 did a hack;

For example, "!important" is written only IE6 not recognized, other versions of IE and modern browsers can be recognized

Other versions of IE and modern browsers can be identified, as well as "+", "" "," \9 ", and so on, here to steal a picture:

B. Selector hack

Selector Hanck is mainly for IE browser, in fact, not much used

The syntax is this: selector{srules}

Re-stealing a picture:

The hack for IE9 can be written like this.

: Root. test{    Background-color:green;}

C.html Header Reference

HTML header references are special, similar to program statements, can only be used in HTML files, not in the CSS file, and can only be executed under IE browser, under other browsers will be ignored as comments.

Like what:

CSS.CSS style sheet?>

<link rel= "stylesheet" type= "Text/<a href=" http:= "" www.php1.cn= "" category= "" 72.html "=" >css "href=" http://www.php1.cn/"><!--? [If IE 7]--><!--? If IE version is 7, call Ie7.<a href= "http://www.php1.cn/category/72.html"-->css style sheet? ><link rel= "stylesheet" type= "Text/<a href=" http:= "www.php1.cn=" "category=" "72.html" = ">css" href= "http://www.php1.cn/" ><!--[ ENDIF]?--><!--? [If LTE IE 6]--><!--? If IE browser version is less than or equal to 6, call Ie.<a href= "http://www.php1.cn/category/72.html"-->css style sheet? ><link rel= "stylesheet" Type= "Text/<a href=" http:= "" www.php1.cn= "" category= "" 72.html "=" >css "href=" http://www.php1.cn/"><!- -[ENDIF]?--; 

Note:
LTE: is less than or equal to the shorthand, that is, smaller than or equal to the meaning.
LT: is less than shorthand, that is, smaller than the meaning.
GTE: is greater than or equal to the shorthand, that is, greater than or equal to the meaning.
GT: is greater than shorthand, that is, the meaning of greater than.
! : Is not equal to the meaning, and JavaScript is not equal to the same judgment.

The use of various mainstream browser hack can refer to this article (visually hack ie more):

Http://www.w3cplus.com/css/browser-hacks.html

There is also a special list of hack situation of the website: http://browserhacks.com/

