CSS-Code zur Unterscheidung von IE8/IE9/IE10/IE11 Chrome Firefox

CSS-Code zur Unterscheidung von IE8/IE9/IE10/IE11 Chrome Firefox

Das Debuggen der Website-Kompatibilität ist wirklich ärgerlich. Die heutigen Website-Designer müssen viel härter arbeiten als früher, da der Webseitencode nicht mehr den Zugriff von IE6 erfüllen muss, sondern den Zugriff vieler Browser. Grob gesagt müssen derzeit mindestens die folgenden Browseranforderungen erfüllt sein: IE8, IE9, IE10, IE11, Chrome und Firefox. Da 360 ​​den Chrome-Kernel verwendet, erfüllt die Erfüllung der Chrome-Anforderungen grundsätzlich die Anforderungen von 360. Die IE-Familie hat verschiedene Versionen, und ich frage mich, warum der IE so gerne an Dingen herumbastelt? Das ist ein großer Ärger für Webdesigner! Heute werde ich die CSS-Hack-Codes für diese wichtigsten Browser zusammenfassen.

Der vorhandene CSS-Code sieht beispielsweise wie folgt aus:

.divInhalt{
    Hintergrundfarbe:#eee;
}

Schreiben wir also auf, wie der Code mit mehreren gängigen Browsern kompatibel gemacht werden kann.

/* IE8+ */
.divInhalt{
    Hintergrundfarbe:#eee\0;
}
/* IE8, IE9 */
.divInhalt{
    Hintergrundfarbe: #eee\8\9\0;
}
/* IE9 */
.divInhalt{
    Hintergrundfarbe: #eee\9\0;
}

Beachten Sie, dass die \8\0-Syntax falsch ist und Sie nicht versuchen sollten, IE8 auf diese Weise zu hacken. Der obige Code hackt IE10 und IE11 nicht separat (es scheint keine Möglichkeit zu geben, diese beiden Browser separat zu hacken), daher verwenden IE10 und IE11 den IE8+-Stil.

Die IE-Familie wurde gehackt. Sehen wir uns nun an, wie man die Browser Chrome und Firefox hackt.

/* Chrom */
@media screen und (-webkit-min-device-pixel-ratio:0) {
    .divInhalt{
        Hintergrundfarbe:#eee;
    }
}
/* Feuerfuchs */
@-moz-document url-prefix() {
    .divInhalt{
        Hintergrundfarbe:#eee;
    }
}

Darüber hinaus können Sie auch andere Browser wie diesen hacken

/* Chrome und Opera */
@media alle und (min-width:0) {
    .divInhalt{
        Hintergrundfarbe:#eee;
    }
}
/* IE9+ */
@media alle und (min-width:0) {
    .divInhalt{
        Hintergrundfarbe:#eee;
    }
}
/* IE10+ */
@media screen und (-ms-high-contrast: aktiv), (-ms-high-contrast: keine) {
    .divInhalt{
        Hintergrundfarbe:#eee;
    }
}

Nach einem solchen Hack kann das Kompatibilitätsproblem der Website-Browser perfekt gelöst werden.

Unterscheiden Sie zwischen IE und Chrome in CSS

/***** Stil-Hack ******/

/* IE6 */
 _Farbe: blau;

/* IE6, IE7 */
 *Farbe: blau; /* oder #Farbe: blau */

/* Jeder Browser außer IE6*/
 Farbe/**/: blau;

/* IE6, IE7, IE8 */
 Farbe: blau\9;

/* IE7, IE8 */
 Farbe/*\**/: blau\9;

/* IE6, IE7 – wird als !important verwendet */
 Farbe: blau !ie; /* !Der String danach kann ein beliebiger String sein*/

/***** Selektor-Hack ******/

/* IE6 und darunter*/
* html #uno { Farbe: rot }

/* IE7 */
*:erstes-kind+html #dos { Farbe: rot } 

/* IE7, FF, Saf, Opera */
html>body #tres { Farbe: rot }

/* IE8, FF, Saf, Opera (jeder Browser außer IE 6,7) */
html>/**/body #cuatro { Farbe: rot }

/* Opera 9.27 und darunter, Safari 2 */
html:erstes-Kind #cinco { Farbe: rot }

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

/* Safari 3+, Chrome 1+, Opera9+, FF 3.5+ */
body:n-ter-Typ(1) #siete { Farbe: rot }

/* Safari 3+, Chrome 1+, Opera9+, FF 3.5+ */
body:erster-vom-Typ #ocho { Farbe: rot }

/* saf3+, chrome1+ */
@media screen und (-webkit-min-device-pixel-ratio:0) {
 #diez { Farbe: rot }
}

/* iPhone / WebKit-Kernel-Mobilterminal*/
@media screen und (max-device-width: 480px) {
 #veintiseis { Farbe: rot }
}

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

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

/* Jeder Browser außer IE6-8*/
:root *> #quince { Farbe: rot }

/* IE7 */
*+html #dieciocho { Farbe: rot }

/* Nur Firefox. 1+ */
 #veinticuatro, x:-moz-any-link { Farbe: rot }

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

Oben finden Sie den detaillierten Inhalt des CSS-Codes zur Unterscheidung von IE8/IE9/IE10/IE11 Chrome Firefox. Weitere Informationen zu CSS zur Unterscheidung von IE11 Chrome Firefox finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<:  Detaillierte Erklärung der Props-Konfiguration von Vue

>>:  Warum erfordern Codestandards, dass SQL-Anweisungen nicht zu viele Verknüpfungen enthalten?

Artikel empfehlen

Detaillierte Beispiele zur Verwendung der Box-Shadow-Eigenschaft in CSS3

CSS enthält viele Attribute. Manche Attribute wer...

Implementierung eines einfachen Gobang-Spiels mit nativem JavaScript

In diesem Artikel finden Sie den spezifischen Cod...

Installationstutorial für MySQL 5.7 unter CentOS 7

1. Laden Sie das offizielle MySQL Yum Repository ...

Docker-Compose-Tutorial: Installation und Schnellstart

Inhaltsverzeichnis 1. Einführung in Compose 2. Co...

Beispiel für die Validierung eines JavaScript-Formulars

HTML-Formulare werden häufig verwendet, um Benutz...

Architektur und Komponentenbeschreibung der privaten Docker-Bibliothek Harbor

In diesem Artikel wird die Zusammensetzung der Ha...

Vue3.0 implementiert die Kapselung des Dropdown-Menüs

Vue3.0 ist bereits seit einiger Zeit auf dem Mark...

CSS realisiert die Realisierung der Hintergrundbild-Bildschirmanpassung

Beim Erstellen einer Homepage, beispielsweise ein...

Detailliertes Tutorial zur Installation von MySQL unter WINDOWS

1. Laden Sie das Installationspaket herunter -Wäh...

So laden Sie Komponentenbibliotheken von Drittanbietern bei Bedarf in Vue3

Vorwort Nehmen Sie Element Plus als Beispiel, um ...

Zusammenfassung der MySQL-Abfragesyntax

Vorwort: In diesem Artikel wird hauptsächlich die...