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?
1. <body>-Tag: Wird verwendet, um den Haupt...
Vorwort Alle Anfragen in Tomcat werden von Servle...
Die Standardanordnung von Text in HTML ist horizo...
Dieser Artikel beschreibt, wie Sie einen sekundär...
In diesem Artikel wird der spezifische JavaScript...
Alibaba Cloud Server installiert und konfiguriert...
Dieser Artikel veranschaulicht anhand eines Beisp...
Der Installationsvorgang ist im Grunde derselbe w...
Zusammenfassung In einigen Szenarien kann eine so...
Die MySQL-Funktionen DATE_ADD(date,INTERVAL expr ...
In diesem Artikel wird der spezifische Code von r...
1. Löschen Sie das gepunktete Feld, wenn die Scha...
EXPLAIN zeigt, wie MySQL Indizes verwendet, um Au...
1. Hintergrund Wenn der Docker-Dienst gestartet w...
Reagieren Sie auf mehrere Arten, um den Wert des ...