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 Erläuterung der Anwendung von Meta-Tags bei der Entwicklung mobiler Plattformen
Jeder kennt das Meta-Tag im Weblayout von Desktop...
Warum MySQL große Transaktionen vermeiden sollte und wie man sie löst
Was ist eine große Sache? Transaktionen, die über...
Beispiel für ein JavaScript-Meldungsfeld
In JavaScript können drei Arten von Meldungsfelde...
Detaillierte Erläuterung der Vorteile von PNG in verschiedenen Netzwerkbildformaten
BMP ist ein von Hardwaregeräten unabhängiges und ...
Tomcat9-Download, -Installation und -Konfiguration + ausführliches Tutorial zur Integration in Eclipse
offizielle Tomcat-Website Tomcat entspricht einem...
Verwendung der hasOwnProperty-Methode des js-Attributobjekts
Die Methode hasOwnProperty() des Objekts gibt ein...
Detaillierte Erläuterung von JavaScript-WebAPI-, DOM-, Ereignis- und Operationselementbeispielen
Inhaltsverzeichnis WebAPI DOM DOM-Baum Methode zu...
WeChat-Miniprogramme ermöglichen nahtloses Scrollen
In diesem Artikelbeispiel wird der spezifische Co...
So verwenden Sie nginx, um bestimmte URL-Anfragen durch reguläre Ausdrücke abzufangen
Nginx-Server nginx ist ein ausgezeichneter Webser...
js regulärer Ausdruck Lookahead und Lookbehind und nicht erfassende Gruppierung
Inhaltsverzeichnis Kombinieren von Lookahead und ...
js fügt dynamisch Beispielcode für eine Liste eingekreister Zahlen hinzu
1. Fügen Sie zuerst das ul-Tag im Textkörper hinz...
Detaillierte Erläuterung der DOM-Stileinstellungen in vier Reaktionskomponenten
1. Inline-Stile Um Inline-Stile zum virtuellen DO...
Ein genauerer Blick auf die Unterschiede zwischen Link und @import
Es gibt drei Hauptmethoden, CSS auf einer Seite zu...
Implementierungsbeispiel eines Nginx+Tomcat-Load-Balancing-Clusters
Inhaltsverzeichnis Einführung 1. Fallübersicht 2....
So öffnen Sie externe Netzwerkzugriffsrechte für MySQL
Wie unten dargestellt: Führen Sie hauptsächlich A...