In this browser of the era of flowers, as the front-end development of our beautiful design to adapt to the various browsers can be painstaking, mainly embodied in JavaScript and CSS above. JavaScript I will not talk about this time, first of all to talk about CSS. In order to adapt to different browsers different versions (version mainly on IE), ie this wonderful flower now we want to be compatible with 6-9, its 10 is also coming out ... Under IE we can write conditional comments to differentiate IE and other browsers, as well as the version of IE, please Google yourself. This article is mainly about CSS hack. The following nonsense to say more, directly on the code<!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. Let me analyze the following: Background-color:blue; All browsers know, here to Firefox, background-color:red\9;\9 all the IE browser can be recognized; 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; _ Dedicated to the magical ie6;: root #test {background-color:purple\9;}: Root is for IE9, a version of the Internet has been circulated: 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.
If give bit crossing have better CSS hack writing or this article has the wrong place, welcome message, the first write article, please lightly hit.
