Different browsers to distinguish CSS hack:
Difference IE6 with FF:
Background:orange;*background:blue;
Distinction between IE6 and IE7:
Background:green!important;background:blue;
Difference IE7 with 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) cannot recognize *;
IE6 can recognize *, but cannot recognize!important,
IE7 can recognize the *, also can identify!important;
FF does not recognize *, but can identify!important;
IE6 IE7 FF
*√√x
!importantx√√
------------------------------------------------------
Add another, underline "_" in addition,
IE6 supports underscores, IE7 and Firefox do not support underscores.
IE6 IE7 FF
*√√x
!importantx√√
_√xx
So we can differentiate Ie6,ie7,firefox.
: Background:orange;*background:green;_background:blue;
Note: No matter what method, the order of writing is Firefox written in the front, IE7 written in the middle, IE6 written in the last side.
Instance
| The code is as follows | Copy Code |
| <! DOCTYPE html> <title>css hack</title> <style> #test { width:300px; height:300px; Background-color:blue; /*firefox*/ BACKGROUND-COLOR:RED9; /*all ie*/ Background-color:yellow; /*ie8*/ +background-color:pink; /*ie7*/ _background-color:orange; /*ie6*/ } : Root #test {background-color:purple9;} /*ie9*/ @media all and (min-width:0px) {#test {background-color:black}}} /*opera*/ @media screen and (-webkit-min-device-pixel-ratio:0) {#test {Background-color:gray}}} /*chrome and safari*/ </style> <body> <div id= "Test" >test</div> </body> |
|
The above code can be directly copy out, save the HTML in the browser to try. Below I will analyze the following:
Background-color:blue; Various browsers are aware, here to Firefox use;
Background-color:red9;9 all IE browsers are recognizable;
Background-color:yellow; is left to IE8, but the author test, found the latest version of opera also know, Khan ... But wait a minute, behind own hack wrote to opera to recognize, so, we think is to IE8 to leave;
+background-color:pink; + IE7 set;
_background-color:orange; _ reserved for magical ie6;
: Root #test {background-color:purple9}: Root is given to IE9, and a version is circulated online: root #test {background-color:purple;}, uh ... This one... , the new version of opera also know, so after the author repeatedly verified that the final IE9 is: Root Selector {property 9;}
@media all and (min-width:0px) {#test {Background-color:black}} This is the Magic opera that 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 nouveau chrome and Safari.
Now look at some of the common
. All-ie{property:value9;}
: Root. ie-9{property:value/;}
. Gte-ie-8{property:value;}
. Lte-ie-7{*property:value;}
. Ie-7{+property:value;}
. Ie-6{_property:value;}
. Not-ie{property//:value;}
@-moz-document Url-prefix () {. Firefox{property:value}}
@media all and (-webkit-min-device-pixel-ratio:0) {. Webkit{property:value}}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {. opera{property : value;} }
@media screen and (max-device-width:480px) {. Iphone-or-mobile-s-webkit{property:value}}
IE8 Latest CSS hack: "9" Example: "Border:1px 9;". Here's "9" can distinguish all IE and Firefox. "" IE8 recognition, IE6, IE7 not. "*" IE6, IE7 can be identified. IE8, Firefox can't. "_" IE6 can Identify "_", IE7, IE8, Firefox can not.
IE6 hack
_background-color: #CDCDCD; /* IE 6*/
IE7 hack
*background-color: #dddd00; /* IE 7*/
IE8 hack
background-color:red; /* IE 8/9*/
IE9 hack
Background-color:blue 9;
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
