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?
Die Ausführungseffizienz der MySQL-Datenbank hat ...
CSS enthält viele Attribute. Manche Attribute wer...
In diesem Artikel finden Sie den spezifischen Cod...
1. Laden Sie das offizielle MySQL Yum Repository ...
Inhaltsverzeichnis 1. Die Schreibreihenfolge eine...
Inhaltsverzeichnis 1. Einführung in Compose 2. Co...
HTML-Formulare werden häufig verwendet, um Benutz...
In diesem Artikel wird die Zusammensetzung der Ha...
Dieser Artikel beschreibt die Installations- und ...
Vue3.0 ist bereits seit einiger Zeit auf dem Mark...
Beim Erstellen einer Homepage, beispielsweise ein...
1. Laden Sie das Installationspaket herunter -Wäh...
Code kopieren Der Code lautet wie folgt: <!-- ...
Vorwort Nehmen Sie Element Plus als Beispiel, um ...
Vorwort: In diesem Artikel wird hauptsächlich die...