About CSS Hack

CSS hack because 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 the CSS is not exactly the same, Also due to the precedence of the CSS in the relationship, it will result in the resulting page effect is different, not get 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.

In other words, the purpose of CSS hack is to make our 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.

CSS hack 3 main forms of expression:

(i) CSS class internal hack

Refers to a CSS property or attribute value that adds a special string that only a browser can recognize. CSS hack mainly for the class internal hack: such as IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but not the underscore "_", and Firefox two do not know.

Body {*background:black*/*/background:Green/* */}

(ii) CSS selector hack

Refers to a special string that is preceded by a CSS selector that only a certain browser can recognize. such as IE6 can identify *html. CLASS{},IE7 can identify *+html. class{} or *:first-child+html. class{}.

(c) HTML header reference (if IE) Hack

This form is mainly for IE browser. For all ie:<!--[if ie]><!--code--><! [Endif]-->:<!--for IE6 and below [if LT IE 7]><!--Code--><! [Endif]--> This type of hack takes effect not only on CSS, but on all code written in the judgment statement.

This type of writing will be ignored by non-IE browser, only IE browser will execute the above code, the above code means that when the version of IE is 8 or less than 8 of IE browser will execute the following style. In the example, there is an OP symbol, LTE, which is less than or equal to the shorthand, meaning is smaller than equals, the other operational symbols also have LT (less than, smaller than), GTE (greater than or equal to, greater than or equal), GT (greater than, greater than).

Common CSS Hack Way:

(i) mode one: Conditional annotation method

Effective only under IE <!--[if ie]> this text is only displayed in IE browser <! [endif]-->
Only valid under IE6 <!--[if IE 6]> this text is displayed only in IE6 browser <! [endif]-->
Only available in IE6 or above <!--[if GTE ie 6]> this text is displayed only in the IE6 above (including) version of IE browser <! [endif]-->
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]-->

(ii) Mode II: Intra-Class attribute prefix method

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.

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

(iii) Mode III: 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 only for IE6 effective *+html *+ prefix only to IE7 effective @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.

About CSS Hack