CSS Hack Way

First, what is CSS hack?

Baidu Encyclopedia is explained this way : CSS hack is due to different manufacturers of browsers, such as Ie,safari,firefox,chrome,opera, or the same manufacturer of different versions of the browser, such as IE6 and IE7, They are not exactly the same as the parsing of CSS, which results in a different page effect than 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.

Second, the principle

Due to different browser and browser versions of CSS support and parsing results are not the same, and CSS priority on the effect of the browser display, we can apply different CSS styles for different browser scenarios.

Third, classification

There are roughly 3 forms of CSS Hack:CSS Attribute prefix method , selector prefix method , and IE conditional annotation method (ie, HTML header reference if IE) Hack, css in actual project Hack is mostly introduced for differences in performance between different versions of IE browsers.

• Attribute prefix method (that is, CSS class internal hack): For example, IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but do not recognize the underscore "_", Ie6~ie10 Know "\9", but Firefox for the aforementioned three are not recognized and so on.
• Selector prefix method (i.e. selector hack): For example IE6 can identify *html. CLASS{},IE7 can identify *+html. class{} or *:first-child+html. class{}.
• IE conditional annotation method (i.e. HTML conditional comment hack): For all IE ( Note: ie10+ no longer supports conditional comments ): <!--[if Ie]>ie browser displays content <! [Endif]-->, for IE6 and the following versions: <!--[if Lt IE 6]> only the content displayed in ie6-<! [endif]-->. This type of hack is not only valid for CSS, but all code written in the judgment statement will take effect.

Above a large list of content said too official, simply say: CSS hack commonly used in three kinds of ways, CSS internal hack, selector hack, HTML header reference, which CSS internal hack most commonly used . Note that:CSS hack is generally written in a wide range of applications, the ability to identify a strong CSS in front, some special, a small range of CSS defined in the back, for example, Firefox written in front of IE7, And IE7 writes in front of IE6 and so on.

CSS internal hack

Since CSS internal hack is most commonly used, let's start by saying:

CSS internal hack syntax is such a selector{ for example:

-background-color:green;

Precede the CSS property with "-", so that this property only IE6 can recognize, of course, plus "*", then IE6/7 can be recognized, and some are written behind the property:

background-color:green\9;

Add "\9" in the back, so only IE browser can recognize, and add "\9\0" only IE9/10 can recognize, and so on!

Or look at the figure is more intuitive, here I use bootstrap to get a simple form to show:

OK, according to the order of the CSS hack, here is an example:

Div{width:300px;Height:300px;Background-color:Red;/*All Browsers*/Background-color:blue\9;/*all IE (ie6+)*/Background-color:green\0;/*IE8*/+background-color:Pink;/*IE7*/_background-color:Orange;/*IE6*/}

If you want to differentiate between the hack of Ie6~ie10 and opera/firefox/chrome in standard mode, here's an example:

IE6 shown as: orange,
IE7 Display as: Pink,
IE8 shown as: yellow,
IE9 shown as: Purple,
IE10 shown as: Green,
Firefox is displayed as: Blue,
Opera is displayed as: black,
Safari/chrome shown as: Gray. Please note the Order of writing!

. Hacktest{Background-color:Blue;/*all identified, here for Firefox*/Background-color:red\9;/*All ie*/Background-color:yellow\0;/*For IE8/IE9/10 The latest version of opera also knows*/+background-color:Pink;/*For Ie6/7*/_background-color:Orange;/*For IE6*/}@media screen and (min-width:0){. hacktest {background-color:black\0;}/*Opera*/} @media screen and (min-width:0){. hacktest {background-color:purple\9; }/*For Ie9/ie10 PS: Some foreign habits often write, not even consider opera also know the actual*/} @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none){. hacktest {background-color:Green; }/*For ie10+ This notation can be adapted to high contrast and default mode, so it can cover all ie10 modes*/} @media screen and (-webkit-min-device-pixel-ratio:0){. hacktest {background-color:Gray;}/*For Chrome/safari*/ }  /*#963棕色: Root is for IE9/IE10, priority is higher than @media, use with caution! If they are combined, add!important in the @media style if necessary to differentiate between IE9 and IE10*//*: Root. hacktest {background-color: #963 \9;}*/

Selector hack

Selector hack is actually mainly for IE browser, not commonly used, commonly used as table:

For example:

: root. Test {           background-color:green;    /* */}

HTML Header Reference

This method is the exclusive hack method of IE browser, the official recommendation of Microsoft Hack Way, in the non-IE browser is ignored as annotations.

<!-- [If ie]>       this text is only displayed in IE browser <![ ENDIF]-    <!--[if IE 6]>       This text is only displayed in IE6 browser <![ ENDIF]-    <!--[if GTE ie 6]>      This text only appears in IE6 and above in IE browser <![ ENDIF]-    <!--[if! IE 8]>        This text in non-IE8 browser display <![ ENDIF]-<!--[if! Ie]>        This text is only displayed in non-IE browser <![ ENDIF] -

Note the point:

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.

PS: Learn the various techniques of CSS hack, but the most important thing is to pay attention to the writing order, if the order is wrong, it will not reach the effect we want Oh! Of course, unless the actual project needs, generally try to avoid the use of CSS hack!

Reference: http://www.cnblogs.com/dolphinX/p/3292630.html

Reference: http://blog.csdn.net/freshlover/article/details/12132801

CSS Hack Way