What is CSS hack? Ie6\7\8\9\10 browser's CSS hack Daquan introduction

CSS hack because of different browsers, such as Internet Explorer 6,internet Explorer 7,mozillafirefox, and so on, the parsing of CSS is not the same, so the resulting page effect is not the same, Can't 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.

The process of writing different CSS code for different browsers is called CSS hack!

At present, ie Core browser is still the main domestic browser, occupy the majority of PC browser market share, version from IE6 to IE10, all the previous workers must face and solve the code compatibility problems of multiple IE browsers. In many cases, we need to write CSS style specifically for IE, ie CSS hack, which will be described in detail below:

1, the application of common special symbols:

IE6:

_selector{property:value;}

Selector{property:value;property:value!important;}//ie6 does not support!important in the same selector

IE7:

+selector{property:value;}

IE8:

Selector{property:value\0;}

IE6 & IE7:

*selector{property:value;}

IE6 & IE7 & IE8:

selector{property:value\9;}

summed up, as follows:

wherein, s means standards mode is the Standard model, q means quirks mode, which is compatible.

(Learn more about quirks mode, Strict (standars) mode?) ）

Hack	Example	IE6 (S)	IE6 (Q)	IE7 (S)	IE7 (Q)	IE8 (S)	IE8 (Q)
*	*color	Yes	Yes	Yes	Yes	No	Yes
+	+color	Yes	Yes	Yes	Yes	No	Yes
-	-color	Yes	Yes	No	No	No	No
_	_color	Yes	Yes	No	Yes	No	Yes
#	#color	Yes	Yes	Yes	Yes	No	Yes
/	Color\0	No	No	No	No	Yes	No
\9	Color\9	Yes	Yes	Yes	Yes	Yes	Yes
!important	Color:blue!important; Color:green;	No	No	Yes	No	Yes	No

2. Conditional Comment Statement (<!--[if ie]> <! [endif]-->)

All IE is recognizable

Only IE6 recognizable

IE6 and IE6 versions are recognized

IE7 The following versions are recognized

Lt means less than the current version of the condition version, and does not contain the current release.

GTE indicates that greeter than or equal the current version, and contains the current version.

LTE means less than or equal the following version of the current version and contains the current version.

3. Meta-declaration

Because IE8 may render the page according to IE7 mode, for the current situation of multi-version ie, the page is usually set x-ua-compatible HTTP header to use the unified rendering mode in IE.

Standard IE7 Mode

Compatible with IE7 mode

Standard IE Mode

4. Other (/*\**/annotation method)

The internet also spread such an IE hack method

. color1{color: #F00; color/*\**/: #00F/*\**/}/*ie6,ie7,ie8,ff,op,sa Recognition */
. color2{color: #F00; color/*\**/: #00F/*\9**/}/*ie7,ie8,ff,op,sa Recognition */
. color3{color: #F00; color/*\**/: #00F \9}/*ie6,ie7,ie8 Recognition */
. color4{color: #F00; color/*\**/: There is a space between the #00F \9}/*ie7,ie8 recognition *//* "color" and "/*\**/" * *

under Analysis:
All browsers know, here to Firefox use;
Background-color:red\9;\9 all IE browsers are recognizable;
Background-color:yellow\0; The IE8 is left for, but I test, found the latest version of opera also know, Khan ... But wait, behind own hack wrote to opera, so, we think is to IE8 stay;
+background-color:pink; + IE7 fixed;
_background-color:orange; _ reserved for magical ie6;
: Root #test {background-color:purple\9;}: Root is for IE9, a version of the Internet is: root #test {background-color:purple\0;}, uh ... This one... , the new opera is also known, so the author has repeatedly verified that the final IE9: root selector {attribute \9;}
@media all and (min-width:0px) {#test {background-color:black\0;}} This is the Magic Opera, which is always with IE, must add a, or firefox,chrome, Safari also knows ...
@media screen and (-webkit-min-device-pixel-ratio:0) {#test {background-color:gray;}} Finally this is the browser upstart Chrome and Safari.

All right, so much more, and pay special attention to the above sequence is not to be changed. CSS hack Although it can solve the differences between the browser CSS display, but after all, do not conform to the specifications, we usually write CSS is best in accordance with the standard, so that we later maintenance is also a great advantage, really no longer use.

the CSS hack to distinguish different browsers:

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!important;*background:blue;

Note: IE can recognize *; standard browsers (such as FF) do not recognize *;
IE6 can recognize *, but not!important,
IE7 can recognize *, can also identify!important;
FF does not recognize *, but can identify!important;

	IE6	IE7	Ff
*	√	√	X
!important	X	√	√

------------------------------------------------------
In addition, add one, underline "_",
IE6 support underscores, IE7 and Firefox do not support underscores.

	IE6	IE7	Ff
*	√	√	X
!important	X	√	√
_	√	X	X

So we can also distinguish Ie6,ie7,firefox
: Background:orange;*background:green;_background:blue;

Note: No matter what method, the order of writing is the Firefox written in front, IE7 written in the middle, IE6 written in the last side.

What is CSS hack? Ie6\7\8\9\10 browser's CSS hack Daquan introduction