Browserkompatibilität zur Lösung des FF/IE6/IE7-hintergrundspezifischen CSS-HACK_Experience-Austauschs

Seit den Anfängen des Internets hat der Kampf zwischen Browsern nie aufgehört. Für Webseitenentwickler ist es natürlich am schwierigsten, mit mehreren Browsern zu arbeiten, um einheitliche Effekte zu erzielen. Ich hoffe wirklich, dass FF eines Tages die Welt dominieren kann, obwohl IE jetzt immer noch die Welt dominiert. Insbesondere die CSS-Kompatibilität des neuesten IE7-Browsers von Microsoft hat für einige Webseitenproduzenten tatsächlich zu einer erheblichen neuen Belastung geführt.
Um in allen Browsern den gleichen Anzeigeeffekt zu erzielen, müssen wir CSS HACK verwenden. Natürlich sprechen wir in diesem Artikel nur über die am häufigsten verwendeten IE6 und FF sowie über den CSS-HACK von IE7, der in Zukunft zum Mainstream werden könnte. Was die Versionen unter IE6 betrifft, die OP und SF sind, werde ich nicht erklären sie hier im Detail. Anfänger werden von der Lektüre dieses Artikels auf jeden Fall etwas gewinnen, und Experten können einfach vorbeikommen und ihn lesen, haha!

Option 1
Schauen Sie sich zunächst den folgenden CSS-Code an:

background-color:orange;
*background-color:blue!important; - Farbe:rot;

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">Script Home-www.jb51.net CSS-Test<title> </title> <style type="text/css"> .bgc{ width:200px; height:200px; background-color:orange; *background-color:blue!important; *background-color:red; } </style> <div class="bgc"> </div>
[Strg+A Alle auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie eine Aktualisierung durchführen, um es auszuführen ]

Ich werde es unten kurz erklären. Wie versteht jeder Browser diese drei Attribute:
Unter FF werden das zweite und dritte Attribut nicht erkannt. Wenn das zweite Attribut nur mit !important hinzugefügt wird, wird FF es definitiv erkennen, aber weil Davor wird ein weiteres Attribut hinzugefügt *, sodass ich es nicht erkenne (nur IE7 erkennt es). Es lautet also „background-color:orange“; Unter IE7 erkennt IE7 zwar das erste, zweite und dritte Attribut, „!important“ bedeutet also „Priorität“, also lautet „*background-color:blue !important“; >Unter IE6 wird das zweite Attribut nicht erkannt, aber das erste und dritte Attribut werden erkannt. Da jedoch das dritte Attribut das erste Attribut überschreibt, lautet IE6 schließlich *background-color: red.

Option 2
Schauen Sie sich zunächst den folgenden CSS-Code an:

Kopieren Sie den CodeDer Code ist wie folgt:Hintergrundfarbe:orange;

_Hintergrundfarbe:rot;

CSS-Testskript home-www.jb51.net <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style type="text/css"> .bgc{ width:200px; height:200px; background-color:orange; *background-color:blue; _background-color:red; } </style> <div class="bgc"></div> [Strg+A, um alle auszuwählen. Hinweis:
Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen ]
Lassen Sie mich kurz erklären, wie jeder Browser diese drei Attribute versteht:
Unter FF erkennt FF das zweite und dritte Attribut nicht, daher lautet es „background-color:orange“;
In FF unter IE7 das dritte Attribut IE7 erkennt es nicht, also liest es das erste und zweite Attribut. Und da das zweite Attribut das erste Attribut abdeckt, liest IE7 schließlich das zweite Attribut *background-color: blue
Unter IE6 erkennt IE6 diese drei Attribute. sodass alle drei Attribute gelesen werden können. Und da das dritte Attribut die ersten beiden Attribute überschreibt, liest IE6 schließlich _background-color.

Stellen Sie sicher, dass Sie die Leseattribute des IE kennen. Dies ist für Anfänger sehr wichtig, um CSS-HACK zu verwenden. Der Browser liest Attribute von oben nach unten, was bedeutet, dass dieselben Attribute eingestellt werden, die zuletzt gelesen wurden Browser. Darüber hinaus wird das „_“ im zweiten Schema nur von IE6 erkannt, was zeigt, dass es sich wie ein großer Esser anfühlt. Darüber hinaus ist !important anders. Es durchbricht die Top-Down-Lesegewohnheit und verwendet die Prioritätsanzeige. Aus den beiden oben genannten Lösungen ist ersichtlich, dass FF außer regulärem CSS-Schreiben und !important nichts erkennt und die Standards vereinheitlicht sind.

Dies soll nicht jeden dazu ermutigen, CSS-HACKs zu verwenden, aber sehen Sie diese HACKs nicht im CSS-Code, der von anderen Leuten geschrieben wurde, und wissen Sie nicht, was sie bedeuten. Schließlich ist die Verwendung von CSS HACK zur Lösung des Kompatibilitätsproblems zwischen Browsern keine langfristige Lösung. Wenn eine neue Version des Browsers erscheint, ist der HACK möglicherweise das von Ihnen ursprünglich geschriebene CSS. Versuchen Sie, CSS HACK null oder weniger zu verwenden, da eine gute Layoutstruktur diese Probleme sehr gut lösen kann und es viele Websites wie diese gibt.