CSS code to distinguish ie8/ie9/ie10/ie11 chrome firefox

CSS code to distinguish ie8/ie9/ie10/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?

Recommend

vue+springboot realizes login function

This article example shares the specific code of ...

How to add and delete unique indexes for fields in MySQL

1. Add PRIMARY KEY (primary key index) mysql>A...

Vue installation and use

Table of contents 1. Vue installation Method 1: C...

Causes and solutions for cross-domain issues in Ajax requests

Table of contents 1. How is cross-domain formed? ...

Summary of knowledge points about events module in Node.js

Through the study and application of Node, we kno...

About IE8 compatibility: Explanation of the X-UA-Compatible attribute

Problem description: Copy code The code is as fol...

Introduction to MySQL <> and <=> operators

<> Operator Function: Indicates not equal t...

Vue uses mockjs to generate simulated data case details

Table of contents Install mockjs in your project ...

How to enter and exit the Docker container

1 Start the Docker service First you need to know...

Detailed explanation of the use of the <meta> tag in HTML

In the web pages we make, if we want more people ...