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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.