Compatibilité du navigateur pour résoudre l'échange CSS HACK_Experience spécifique à l'arrière-plan FF/IE6/IE7

Depuis les débuts d’Internet, la bataille entre navigateurs n’a jamais cessé. Bien entendu, le plus difficile concerne les développeurs de pages Web. Afin de répondre aux normes d’expérience utilisateur et de convivialité, ils doivent travailler sur plusieurs navigateurs pour obtenir des effets unifiés. J'espère vraiment qu'un jour FF pourra dominer le monde, même si maintenant IE domine toujours le monde. En particulier, la compatibilité CSS du dernier navigateur IE7 de Microsoft a en effet ajouté une nouvelle charge très lourde à certains producteurs de pages Web.
Afin d'avoir le même effet d'affichage sur tous les navigateurs, nous devons utiliser CSS HACK. Bien entendu, dans cet article, nous ne parlons que des IE6 et FF les plus couramment utilisés, ainsi que du CSS HACK de IE7 qui pourrait devenir courant à l'avenir. Quant aux versions inférieures à IE6 qui sont OP et SF, je ne les expliquerai pas. les en détail ici. Les novices gagneront certainement quelque chose en lisant cet article, et les experts n'auront qu'à passer par là et le lire, haha ​​!

Option 1
Jetez d'abord un œil au code CSS suivant :

background-color:orange
*background-color:blue!important; - couleur : rouge

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">Script Accueil-test css www.jb51.net<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>
[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour l'exécuter ]

Je vais l'expliquer brièvement ci-dessous Comment chaque navigateur comprend-il ces trois attributs :
Sous FF, les deuxième et troisième attributs ne sont pas reconnus. Si le deuxième attribut est simplement ajouté avec !important, FF le reconnaîtra certainement, mais parce que. un autre attribut est ajouté avant *, donc je ne le reconnais pas (seul IE7 le reconnaît). Donc, ce qu'il lit est background-color:orange;
Sous IE7, bien que IE7 reconnaisse les premier, deuxième et troisième attributs, !important signifie priorité, donc ce qu'il lit est *background-color:blue !important; >Sous IE6, le deuxième attribut n'est pas reconnu, mais les premier et troisième attributs sont reconnus. Cependant, comme le troisième attribut écrase le premier attribut, IE6 lit finalement *background-color: red.

Option 2
Jetez d'abord un œil au code CSS suivant :

Copiez le code Le code est la suivante :

couleur de fond :orange

*couleur de fond :bleu
couleur de fond :rouge

accueil du script de test CSS-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>
[Ctrl+A pour tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez l'actualiser pour l'exécuter ]
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 wissen, wie man Attribute des IE liest. Dies ist für Anfänger sehr wichtig, um CSS-HACK zu verwenden. Das bedeutet, dass die gleichen Attribute von oben nach unten gelesen werden. Legen Sie fest, dass der zuletzt gelesene Text im Browser angezeigt werden soll. Darüber hinaus wird das „_“ in der zweiten Option 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 kennt 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 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 ursprünglich von Ihnen 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.