CSS Learning notes---compatibility css hack

CSS hack because of different manufacturers of browsers, such as the Internet Explorer,safari,mozilla Firefox,chrome, or different versions of the same manufacturer's browser, such as IE6 and IE7, the parsing of CSS is not exactly the same, As a result, the resulting page effect is not the same as the page effect we need. At this time we need to write different CSS for different browsers, so that it can be compatible with different browsers, can be in different browsers can also get the desired page effect.
Simply put, the purpose of CSS hack is to make your CSS code compatible with different browsers. Of course, we can, in turn, use CSS hack to customize different CSS effects for different versions of browsers.
Because different browsers support the CSS and parse the result is not the same, but also due to the precedence of the CSS in the relationship. We can write different CSS for different browsers according to this.
There are roughly 3 forms of CSS Hack, CSS class internal Hack, selector Hack, and HTML header reference (if IE) Hack,css Hack primarily for class internal Hack: such as IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", But do not recognize the underscore "_", and Firefox two are not recognized. Wait a minute
Selector hack: For example, IE6 can identify *html. CLASS{},IE7 can identify *+html. class{} or *:first-child+html. class{}. Wait a minute
HTML[1] Header Reference (if IE) Hack: For all ie:<!--[if ie]><!--your code--><! [Endif]-->, for IE6 and the following versions:<!--[if LT IE 7]><!--Your code--><! [Endif]--> This type of hack takes effect not only on CSS, but on all code written in the judgment statement.
Common CSS Hack way

(1) mode one conditional annotation method
Effective only under IE
<!--[If ie]>
This text is only displayed in IE browser
<! [endif]-->
Only takes effect under the IE6.
<!--[if IE 6]>
This text is only displayed in IE6 browser
<! [endif]-->
Only valid for versions above IE6
<!--[if GTE IE 6]>
This text is only displayed in IE6 or above (including) version of IE browser
<! [endif]-->
is not effective on IE8.
<!--[if! IE 8]>
This text is displayed in a non-IE8 browser
<! [endif]-->
Non-IE browser effective
<!--[if! Ie]>
This text is only displayed in non-IE browser
<! [endif]-->
(2) method two in class attribute prefix
The attribute prefix method is preceded by the CSS style property name with some hack prefixes that only a specific browser can recognize to achieve the desired page presentation effect.
Description: In standard mode
"The-″ minus is IE6 proprietary hack
"The \9″ie6/ie7/ie8/ie9/ie10 are in effect.
"The \0″ie8/ie9/ie10 are in force and are IE8/9/10 hack
"\9\0″ only for Ie9/ie10, is IE9/10 's hack
(3) CSS hack method Three: Selector prefix method
The selector prefix method is for browsers that are inconsistent with some pages or that require special treatment, hack with prefixes that are only recognized by certain browsers before the CSS selector.
At present, the most common is
*html * prefix is only valid for IE6 *+html *+ prefix is only valid for IE7 @media screen\9{...} Valid for IE6/7 only @media \0screen {body {background:red;}} Valid only for IE8 @media \0screen\,screen\9{body {background:blue;}} Only valid for Ie6/7/8 @media screen\0 {body {background:green;}} is valid for IE8/9/10 only @media screen and (min-width:0\0) {body {background: Gray }} only valid for IE9/10 @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {body {background:orange;}} only for IE1 0 effective, etc.
For example, to distinguish between IE6 and Firefox two browsers, you can write:
div{
background:green;/*forfirefox*/
*background:red;/*forie6*/(BOTHIE6&AMP;&AMP;IE7)
}
I see in the IE6 is red, in Firefox see is green.
Explain:
The above CSS in Firefox, it is not know what the back of the thing with the asterisk, so it filtered out, ignored, the result is: Div{background:green}, so it is natural that the background of this div is green.
In IE6, it can be identified by the two background, which results in the following: div{background:green;*background:red;}, so according to the priority level, in the back of the red priority is high, So of course the background color of this div is red.
CSS hack: Distinguishing Ie6,ie7,firefox
Distinguish between different browsers, CSS hack notation:
Difference between IE6 and FF:
Background:orange;*background:blue;
Difference between IE6 and IE7:
Background:green!important;background:blue;
Difference between IE7 and FF:
Background:orange;*background:green;
Difference ff,ie7,ie6:
Background:orange;*background:green;_background:blue;
Background:orange;*background:green!important;*background:blue;

CSS Learning notes---compatibility css hack