The most comprehensive CSS hack in history (ie6-9, Firefox, chrome, opera, Safari)

In this era of browser competition, as a front-end developer, we have struggled to adapt to various browsers for our beautiful design, mainly reflected in JavaScript and CSS. I will not talk about JavaScript this time. Let's talk about CSS first.

To adapt to different versions of different browsers (ie is the main version), we need to be compatible with 6-9, and its 10 is coming soon... In IE, we can write condition comments to distinguish ie from other browsers, as well as IE versions. please google them on your own. This article Article We mainly discuss CSS hack. Let's talk about the following. 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 >
< Div ID = "Test" > Test </ Div >
</ Body >
</ Html >   Copy code

You can copy the code above and save it as HTML in various browsers. Let me analyze it as follows:

Background-color: Blue; available in all browsers. It is used for Firefox. Background-color: Red \ 9; \ 9 can be recognized by all IE browsers. Background-color: yellow \ 0; \ 0 is left for IE8, But I tested it and found that the latest Opera version also knows, Khan... However, it is not slow. Later, we wrote our own hack to opera for recognition. Therefore, \ 0 is considered to be reserved for IE8; + background-color: pink; + IE7; _ Background-color: orange; _ dedicated to the magic IE6;: Root # test {background-color: Purple \ 9;}: Root is for ie9, the following versions are available on the Internet: Root # test {background-color: Purple \ 0 ;}, er... This ..., the new Opera version is also known, so I have repeatedly verified that ie9 exclusive to: Root selector {attribute \ 9;} @ media all and (min-width: 0px) {# test {background-color: Black \ 0;} This is a magic opera that is always competing with IE to recognize \ 0. You must add \ 0, or Firefox, chrome, safari, too... @ Media screen and (-WebKit-Min-device-pixel-ratio: 0) {# test {background-color: Gray ;}} Finally, this is the latest chrome and Safari browser. Well, that's all. Pay special attention that the above sequence cannot be changed. CSS hack can solve the problem of CSS display differences between browsers, but it does not comply with W3C standards after all. We usually write CSS according to standards, which will be of great benefit to our future maintenance, it cannot be reused. From: http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.html