Firefox
A tag needs to be specified Display:block, to be able to set the length width, otherwise invalid
Chrome:
Common
This is the most complete, plus one.
@-moz-document Url-prefix () {
} Firefox proprietary
Also add a!important of the correct understanding, other browsers refer to the Web, in the IE6 can not overwrite the previously declared CSS class, but it is possible to overwrite the inline CSS (is the element style), can be used
IE series can also use the * number looks like
The above code can be copied directly, save the HTML in each browser to try. Let me analyze the following:
All browsers know, here to Firefox use;\9 All IE browsers are recognizable;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;+ + IE7 fixed;_ _ Dedicated to the magical IE6;: Root #test {}: Root is for IE9, the online version is : 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, and must be added to the other, or Firefox,chrom E,safari also know ... @media screen and (-webkit-min-device-pixel-ratio:0) {#test {}} 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.
[13 Migration]firefox and chrome CSS compatible