Hack of various browsers (Chrome Firefox ie, etc.)

Source: http://www.wufangbo.com/css-hack/

HACK is for different browsers to write different CSS style, so that the browser can achieve consistent rendering effect, then for different browsers to write different CSS code process, called CSS HACK, also called the CSS HACK. And then put hack in the browser-specific CSS file, let its qualified browser to resolve the code, as described in the previous conditional style, we put the CSS hack code into the conditional style file, the qualified browser to parse, non-conforming will not parse, from the face to achieve the page rendering effect you need. In general, the use of CSS hack will use your CSS code part of the loss, and then the use of conditional style, using its original CSS code in some browser parsing, and CSS hack code in a qualified browser to replace the original CSS part of the code. Common is used under the IE6, not specifically, I think we have met. Let's take a look at what hack all browsers have, in other words, what CSS can be written by various browsers.

Here's what I'm collecting about hack in each browser.

1. Firefox

@-moz-document Url-prefix () {. selector {property:value;}}
The above is only by the Firefox browser recognition of the wording, such as:

@-moz-document Url-prefix () {. demo {color:lime;}}
There are several ways to support Firefox:

/* Support for all versions of Firefox */#selector [id=selector] {property:value;} or: @-moz-document Url-prefix () {. selector {Property:va Lue }/* supports all Gecko kernel browsers (including Firefox) */*>.selector {property:value;}
2. WebKit tenon Core browser (Chrome and Safari)

@media screen and (-webkit-min-device-pixel-ratio:0) {Selector {property:value;}}
The above is written primarily for the WebKit kernel browser, such as Google Chrome and Safari browser:

@media screen and (-webkit-min-device-pixel-ratio:0) {. demo {color: #f36;}}
3. Opera browser

Html:first-child>body Selector {property:value;} or: @media all and (min-width:0) {Selector {property:value;}} or: @ Media All and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {Head~body Selector {property:value;}}
The above is the hack of the Opera browser:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {Head~body. demo { Background:green; } }
4. IE9 Browser

: Root Selector {property:value9;}
Above is the writing of IE9, the specific application is as follows:

: Root. Demo {color: #ff09;}
5, IE9 and IE9 versions below

Selector {property:value9;}
This type of writing only IE9 and IE9 the following version can be identified, it is important to note here "9" can only be "9" can not be anything else, such as "8", otherwise it will lose effect, such as:

. demo {background:lime9;}
6. IE8 Browser

Selector {property:value/;} or: @media? screen{Selector {property:value;}}
Only IE can recognize the above, such as:

. Color {color: #fff/;} or: @media? screen{. Color {color: #fff;}}
7, IE8 and IE8 versions

Selector {property:value?;}
This notation is only supported by IE8 and IE8 versions, such as

. demo {color: #ff0?;}
8. IE7 Browser

*+html Selector{property:value;} or *:first-child+html Selector {property:value;}
Both of the above are recognized under the IE7 browser, such as:

*+html. demo {Background:green;} or: *:first-child+html. demo {Background:green;}
9, IE7 and IE7 the following version of the browser

Selector {*property:value;}
The above notation can be identified in IE7 and in the following versions, such as:

. demo {*background:red;}
10. IE6 Browser

Selector {_property/**/:/**/value;} or: Selector {_property:value;} or: *html Selector {property:value;}
The specific application is as follows:

. demo {_width/**/:/**/100px;} or:. demo {_width:100px;} or: *html. demo {width:100px;}
The above describes how various versions of the hack are identified under different browsers, including the ie6-9 and modern versions of the browser's wording. According to the above, our hack writing for different browsers is divided into two types: the CSS selector and the CSS attribute to distinguish the different hack notation. Let's look at these two different ways:

Hack syntax for CSS selectors
Here we mainly look at the CSS selector and CSS property selector support in different browsers. Let's look at the CSS selector support.

Hack syntax for CSS selectors

1, IE6 and IE6 the following version of the browser

* HTML. Demo {Color:green;}
2, only IE7 browser

*:first-child+html. demo {Color:green;}
3. All browsers except IE6 (ie7-9, Firefox,safari,opera)

Html>body. demo {Color:green;}
4, Ie8-9,firefox,safari,opear

Html>/**/body. demo {Color:green;}
5, ie9+

: Root. demo {color:red;}
6. Firefox browser

@-moz-document Url-prefix () {. demo {color:red;}}
6. WebKit Kernel browser (Safari and Google Chrome)

@media screen and (-webkit-min-device-pixel-ratio:0) {. demo {color:red;}}
7. Opera browser

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {Head~body. demo { color:red; } }
8, Iphone/mobile WebKit

@media screen and (max-device-width:480px) {. Demo {color:red}}
CSS Properties hack notation
1. IE6 Browser

. demo {_color:red;}
2. Ie6-7 Browser recognition

. demo {*color:red;}
3, all browsers except IE6 browse outside

. demo {color/**/:red;}
4. Ie6-9 Browser

. demo {color:red9;}
5. Ie7-8 Browser

. demo {color/***/:red9;}
Listed above are the various browsers on the CSS of the hack, based on the modern browser Safari,google Chrome and Firefox writing, but also for our front-end personnel of the most annoying ie6-9 version of the browser, the hack of the wording, And these hack we are divided into CSS selector hack notation and CSS properties of hack notation. However, the specific application, we can be based on their own needs to determine, the following list of my personal two ways:

First, the economical type determination:
This writing emphasizes the hack of the individual CSS. Different browsers use different hack writing, in fact, only with IE hack written more (because we write hack is mainly for IE browser), especially IE6 under the browser. The advantage of writing hack for a variety of browsers is that it is easy to remember the hack of various browsing shun. Because other browsers are mostly for modern browsers, relatively few. For the use of this hack, I recommend using the following method:

. demo {color:red;/* All modern browsers */color:green9;/* all IE browsers */color:lime?;/ *ie8-9 Browser */*color:red;/*ie6-7 Browser */+color:blue;/*ie7 Browser */_color:orange;/*ie6 Browser */} @media all and (min-width:0px) {C Olor: #000;/*webkit and Opera browser */} @media screen and (-webkit-min-device-pixel-ratio:0) {color: #f36;/*webkit Kernel browser */} @me Dia all and (-wekit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {Head~body. demo {Colo R: #369;} /*opera*/} @-moz-document Url-prefix () {. Demo{color: #ccc;} /* All Firefox */}
Ii. the perfection of the wording of the doctrine
This method is the pursuit of perfectionism, mainly in line with our previous section of the IE conditional comments, all using the hack selector. This is a two-step notation:

1. Create a conditional style sheet and add the corresponding class class name to the body in the HTML:

<!–[if ie6]–><<!–[if ie7]–><!–[if ie8]–><!–[if ie9]–><!–[if! Ie]–>
2, then create the corresponding style

. demo {Color:blue;} /* Modern Browser */. Non-ie. Demo {color:red;} /* Except IE out of browser */. IE9. Demo {Color:yellow;} /*IE9 Browser */. IE8. Demo{color:green;} /*IE8 Browser */. IE7. demo {Color:orange;} /*ie7 Browser */. IE6. demo {color:lime;} /*ie6 Browser */@media all and (min-width:0px) {. demo {color:black;}/* WebKit and Opera */} @media screen and (-webkit-min-d evice-pixel-ratio:0) {. Demo{color: #369;} /* WebKit */} @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {Hea D~body. Demo{color: #cf6;} /* Opera */} @-moz-document Url-prefix () {. Demo{color: #963;} /* Firefox */}
Above is the current various browsers, the relevant CSS hack, below we specifically look at an example:

HTML Markup

Test color

CSS Code

. demo {color:red;/* All modern browsers */color:green9;/* all IE browsers */color:lime?;/ *ie8-9 Browser */*color:red;/*ie6-7 Browser */+color:blue;/*ie7 Browser */_color:orange;/*ie6 Browser */}: Root. demo {color: #9639;} @-moz -document Url-prefix () {. Demo{color: #897;} /* All Firefox */} @media screen and (-webkit-min-device-pixel-ratio:0) {. demo {color: #000;} /*webkit*/} @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {head ~body. demo {color:red;} /*opera*/}
See Final:
>

Please list the browser under the hack of the wording, we write the CSS hack can also refer to the following chart

Reprint please specify: Hack of various browsers (Chrome Firefox IE, etc.)-front-end development-Vouffenbeau

Hack of various browsers (Chrome Firefox ie, etc.)