ie11 chrome firefox

Website compatibility debugging is really annoying. Today's website designers have to work much harder than before, because the web page code no longer needs to satisfy the access of IE6, but must satisfy the access of many browsers. Roughly speaking, at present, at least the following browser requirements must be met: IE8, IE9, IE10, IE11, Chrome, and Firefox. Since 360 uses the Chrome kernel, meeting Chrome's requirements basically meets 360's requirements. The IE family has different versions, and I wonder why IE likes to tinker with things so much? What a trouble this brings to web designers! Today, I will summarize the CSS hack codes for these major browsers.

For example, the existing CSS code is as follows:

.divContent{
    background-color:#eee;
}

So let's write down how to make the code compatible with several mainstream browsers.

/* IE8+ */
.divContent{
    background-color:#eee\0;
}
/* IE8, IE9 */
.divContent{
    background-color:#eee\8\9\0;
}
/* IE9 */
.divContent{
    background-color:#eee\9\0;
}

Note that the \8\0 syntax is incorrect and you should not try to hack IE8 in this way. The above code does not hack IE10 and IE11 separately (it seems that there is no way to hack these two browsers separately), so IE10 and IE11 use the IE8+ style.

The IE family has been hacked. Now let’s see how to hack Chrome and Firefox browsers.

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .divContent{
        background-color:#eee;
    }
}
/* Firefox */
@-moz-document url-prefix() {
    .divContent{
        background-color:#eee;
    }
}

In addition, you can also hack other browsers like this

/* Chrome and Opera */
@media all and (min-width:0) {
    .divContent{
        background-color:#eee;
    }
}
/* IE9+ */
@media all and (min-width:0) {
    .divContent{
        background-color:#eee;
    }
}
/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .divContent{
        background-color:#eee;
    }
}

After such a hack, the website browser compatibility problem can be perfectly solved.

Differentiate between IE and Chrome in CSS

/***** Style Hack ******/

/* IE6 */
 _color: blue;

/* IE6, IE7 */
 *color: blue; /* or #color: blue */

/* Any browser except IE6*/
 color/**/: blue;

/* IE6, IE7, IE8 */
 color: blue\9;

/* IE7, IE8 */
 color/*\**/: blue\9;

/* IE6, IE7 -- used as !important */
 color: blue !ie; /* !The string after can be any string*/

/***** Selector Hack ******/

/* IE6 and below*/
* html #uno { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (any browser except IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, Safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez { color: red }
}

/* iPhone / webkit kernel mobile terminal*/
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }

/* Any browser except IE6-8*/
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
 #veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */
 #veinticinco, x:-moz-any-link, x:default { color: red }

The above is the detailed content of the CSS code to distinguish IE8/IE9/IE10/IE11 Chrome Firefox. For more information about CSS to distinguish IE11 Chrome Firefox, please pay attention to other related articles on 123WORDPRESS.COM!

<<: Detailed explanation of Vue's props configuration

>>: Why do code standards require SQL statements not to have too many joins?