CSSHack Daquan-teach you how to distinguish IE6-IE10, FireFox, Chrome, Opera _ experience exchange

Today, I sorted out some common CSSHack, including the commonly used IEhack and the Hack of Firefox, Chrome, and operabrowser, and integrated these CSSHack together, I wrote a small browser tester now for browser IE6-IE10, Firefox, Chrome, Opera, Safari... There are a large number of competitors, and there are a lot of options for users, but this is a bitter problem for Web Front-end developers.
Today, I sorted out some common CSS Hack, including the commonly used IE hack and the Hack of Firefox, Chrome, and operabrowser, and integrated these CSS Hack together, I wrote a small browser tester. :

Let's take a look at the code below:

Html section:

The Code is as follows:

Background Color in IE6: # ccc

Background Color in IE7: #666

Background Color in IE8: # 06f

Background Color in IE9: # f00

Background Color in IE10: # 0ff

Background Color in webkit, Safari, and Chrome: # ff0

Background Color in FireFox: # f0f

Background Color in Opera: #0f0

CSS, this part only paste the Hack part of the code, the layout is not pasted:

The Code is 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