CSS Hack-teach you how to differentiate Ie6-ie10, FireFox, Chrome, Opera_ experience Exchange

Now the browser Ie6-ie10, Firefox, Chrome, Opera, Safari ... A large number of schools of contention, the user has a lot of choice, but this can be painful to the Web front-end developers.
Today, some commonly used CSS hack, including the commonly used IE hack and Firefox, Chrome, Opera browser hack, and the CSS hack together, write a small browser tester. As shown in the figure:

Let's take a look at the code here:

HTML section:

Copy Code code as follows:

<div class= "Content" >
<div class= "Test" ></div>
<div class= "TXT" >
<p>ie6 background color: <span class= "IE6" style= "Background-color: #ccc;" > #ccc </span></p>
<p>ie7 background color: <span class= "IE7" style= "Background-color: #666;" > #666 </span></p>
&LT;P&GT;IE8 background color: <span class= "IE8" style= "Background-color: #06f;" > #06f </span></p>
&LT;P&GT;IE9 background color: <span class= "IE9" style= "Background-color: #f00;" > #f00 </span></p>
<p>ie10 background color: <span class= "Ie10" style= "Background-color: #0ff;" > #0ff </span></p>
<p>webkit,safari,chrome background color: <span class= "Webkit-safari-gg" style= "Background-color: #ff0;" > #ff0 </span></p>
<p>firefox background color: <span class= "Firefox" style= "Background-color: #f0f;" > #f0f </span></p>
<p>opera background color: <span class= "opera" style= "Background-color: #0f0;" > #0f0 </span></p>
</div>
</div>

The CSS part, this part only pastes the hack part the code, the layout does not have the post:

Copy Code code as follows:

. content. Test {
width:200px;
height:200px;
Background: #f60; /*all*/
Background: #06f9; /*ie*/
*background: #666; /*ie6,7*/
_background: #ccc; /*ie6*/
}

* * WebKit and Opera * *
@media all and (min-width:0) {
. content. Test {
Background: #0f0;
}
}

* WebKit * *
@media screen and (-webkit-min-device-pixel-ratio:0) {
. content. Test {
Background: #ff0;
}
}

/*firefox*/
@-moz-document Url-prefix () {
. content. Test {
Background: #f0f;
}
}

/*ie9+*/
@media all and (min-width:0) {
. Content. test{
Background: #f009;
}
}

/*ie10+*/
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
. content. Test {
Background: #0ff;
}
}

Css-hack-ms-moz-webkit-o-jb51.net.rar