Home > Developer > Web Develop
What is CSS hack
CSS hack because of different browsers, such as Ie6,ie7,firefox, and so on, the parsing of CSS is not the same, so the resulting page effect is not the same, 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.
CSS Hack Categories
Hack is mainly divided into CSS selector hack, CSS properties hack, ie conditional annotation hack.
CSS selector hack: For example, IE6 can recognize *html. CLASS{},IE7 can recognize *+html. class{} or *:first-child+html. class{}.
CSS Properties hack: For example, IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but do not recognize the underscore "_", and Firefox two can not recognize and so on.
ie conditional comment hack:
For all ie:<!--[if ie]><!--your code--><! [endif]-->
For IE6 and the following versions:<!--[if LT IE 7]><!--Your code--><! [endif]-->
This type of hack is not only valid for CSS, but all code written in the judgment statement will take effect.
The writing order is usually written in front of the CSS of the browser with strong recognition ability.
Usage
For example, to distinguish between IE6 and Firefox two browsers, you can write:
Div {background:Green*/*/*background:red/* * /(both IE6 && IE7)}You can see the red in the IE6, and the green one in Firefox.
In Firefox, it is not able to identify the back of the thing with the asterisk, and then filter it out, the result is: Div{background:green}, so it is natural that the background of this div is green. In IE6, its two background can be identified, the result of which it resolves is: div{background:green;background:red;}, so according to the priority level, in the back of the red priority is high, So of course the background color of this div is red.<!DOCTYPE HTML> <HTML> <Head> <title>Css Hack</title> <style>#test{width:300px;Height:300px;Background-color:Blue; /*Firefox*/Background-color:red\9; /*All ie*/Background-color:yellow\0; /*IE8*/+background-color:Pink; /*IE7*/_background-color:Orange; /*IE6*/ }: Root #test{Background-color:purple\9; } /*IE9*/@media All and (min-width:0px){#test {Background-color:black\0;} } /*Opera*/@media screen and (-webkit-min-device-pixel-ratio:0){#test {Background-color:Gray;} } /*Chrome and Safari*/ </style> </Head> <Body> <DivID= "Test">Test</Div> </Body> </HTML>
The above code can be copied directly, save the HTML in each browser to try. Analysis:
(1) Every browser knows, here to Firefox use;
(2) \9 all IE browser can be recognized;
(3) IE8 is left to the, 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;
(4) + + IE7 fixed;
(5) _ _ Dedicated to the magical IE6;
(6): Root #test {}: Root is for IE9, the Internet has circulated a version is: root #test {background-color:purple\0;}, the new opera is also known, so the author repeatedly verified the final IE9 Special: root Selector {property \9;}
(7) @media all and (min-width:0px) {#test {}} This is the Magic Opera, which is always with IE, must add a plus, or Firefox,chrome,safari also know ...
(8) @media screen and (-webkit-min-device-pixel-ratio:0) {#test {background-color:gray;}} Finally this is the browser upstart Chrome and Safari.
| Browser | CSS hack |
|---|---|
| IE6 | _background-color:#38DB24; |
| IE67 | *background-color:#38DB24 ; |
| IE67 | +background-color:#38DB24 ; |
| IE67 | #background-color:#38DB24; |
| IE67 | background-color:#38DB24 !ie; |
| IE678910 | background-color:#38DB24\9; |
| Ie78910&firefox&opera&chrome&safari | html>body .ie78910-all-hack |
| Ie8910&firefox&opera&chrome&safari | html>/**/body .ie8910-all-hack |
| Ie8910&opera | background-color:#38DB24\0; |
| IE910 | :root .ie910-hack |
| IE910 | background-color:#38DB24\9\0; |
| Ie910&firefox&opera&chrome&safari | body:nth-of-type(1) .ie910-all-hack |
| Ie910&firefox&opera&chrome&safari | @media all and (min-width: 0px) |
| Ie910&firefox&opera&chrome&safari | @media all and (min-width: 0px) |
| Ie910&firefox&opera&chrome&safari | :root *> .ie910-all-4-hack |
| IE10 | @media screen and (-ms-high-contrast: active), |
| Firefox | @-moz-document url-prefix() |
| Chrome&safari | @media screen and (-webkit-min-device-pixel-ratio:0) |
CSS Tips (ii): CSS hack
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
