CSS Hack Daquan-teach you how to distinguish between IE6-IE10, FireFox, Chrome, Opera, ie6-ie10chrome

CSS Hack Daquan-teach you how to distinguish between IE6-IE10, FireFox, Chrome, Opera, ie6-ie10chrome

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.

 

The current 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:
<Div class = "content">
<Div class = "test"> </div>
<Div class = "txt">
<P> background color in IE6: <span class = "ie6"> the Hack part of the code will not be 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;
}
}