The most complete CSS hack in history (Ie6-9,firefox,chrome,opera,safari)

Source: Internet
Author: User

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 <title>Css Hack</title> Test 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 repeatedly verifies that the final IE9 is: root selector {attribute \9;} @media all and (min-width:0px) {#test {background-color:black\0;}} This is always with IE rush to recognize the magic of the opera, must add a, or Firefox,chrome,safari also know ... @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.

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.