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?
Inhaltsverzeichnis Hintergrund 1. Was ist DNS-Pre...
Inhaltsverzeichnis Vorwort Design erreichen Zusam...
Es gibt drei Typen von MySQL-gespeicherten Prozed...
Einführung Kürzlich musste ich für einen großen A...
Es gibt zwei Möglichkeiten, Daten in MySQL zu lös...
In diesem Artikel wird der spezifische JavaScript...
Inhaltsverzeichnis 1. beforeCreate und erstellte ...
Weil ich ein Datenbank-Tutorial habe, das auf SQL...
1. Entpacken Sie das Zip-Paket in das Installatio...
Vorwort Bei der tatsächlichen Verwendung der Date...
Inhaltsverzeichnis Vorwort 1. Verwenden Sie for.....
CSS-Importmethode - Inline Durch das Style-Tag-At...
Inhaltsverzeichnis Vorwort: 1. Einführung in die ...
Wie schreibt man „join“? Wenn Sie „Left Join“ ver...
In diesem Artikel wird der Beispielcode für erwei...