Hack (browser-compatible CSS hack)

The principle of 1.hack

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 for the selector hack: for example, IE6 can identify *html. CLASS{},IE7 can identify *+html. class{} or *:first-child+html. class{}. And so on HTML 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. 2.CSS hack mode

(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 IE6 <!--[if IE 6]> this text is displayed only in IE6 browser <! [endif]--> only valid at IE6 or above <!--[if GTE ie 6]> this text only appears in IE6 above (including) version of IE browser <! [endif]--> is not effective on IE8 <!--[if! IE 8]> This text in non-IE8 browser display <! [endif]--> non-IE browser effective <!--[if! Ie]> This text is only displayed in non-IE browser <! [endif]--> (2) mode two intra-Class attribute prefix method 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

*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.

Hack (browser-compatible CSS hack)