CSS Hack Encyclopedia-Teach you how to distinguish IE6-IE10, FireFox, Chrome, Opera

CSS Hack Encyclopedia-Teach you how to distinguish IE6-IE10, FireFox, Chrome, Opera_Experience exchange

WBOY

Release： 2016-05-16 12:03:43

Original

1609 people have browsed it

The current browsers are IE6-IE10, Firefox, Chrome, Opera, and Safari. . . There are so many, it can be said that a hundred schools of thought are contending, and there are many options for users, but this is a pain for Web front-end developers.
Today I sorted out some commonly used CSS Hacks, including commonly used IE hacks and Hacks for Firefox, Chrome, and Opera browsers. I combined these CSS Hacks and wrote a small browser tester. As shown in the picture:

CSS Hack Encyclopedia-Teach you how to distinguish IE6-IE10, FireFox, Chrome, Opera_Experience exchange

Let’s take a look at the code:

html part:

Copy code The code is as follows:

Background color under IE6: #cccphpc nltphpcn/span>

Background color under IE7: #666

#06f

Background color under IE9: #f00phpc nltphpcn/span>

IE10 Background color: #0ff

webkit,Safari,Chrome background color: #ff0

FireFox background color: # f0f

Opera background color: #0f0

CSS part, only the Hack part of the code will be posted in this part, and the layout will not be posted:

Copy code 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 {
 .content: background: #0ff;
 }
} 