Zusammenfassung der Lösung von CSS-Browser-Kompatibilitätsproblemen

Die Kompatibilität von CSS mit Browsern ist manchmal ein Problem, wenn Sie die Techniken und Prinzipien verstehen. Wir haben Kompatibilitätsmethoden für IE7, 6 und Fireofx aus dem Internet zusammengestellt Versuchen Sie für den Übergang zu web2.0, Code im xhtml-Format zu schreiben. Als W3C-Standard muss DOCTYPE hinzugefügt werden >

1.p vertikales Zentrierungsproblem Vertical-Align:Middle; Erhöhen Sie den Zeilenabstand auf die gleiche Höhe wie die gesamte p-Zeilenhöhe:200px. Fügen Sie dann den Text ein und er wird vertikal zentriert. Der Nachteil besteht darin, dass der Inhalt so gesteuert werden muss, dass er nicht umgebrochen wird.

2. Das Problem der Verdoppelung des Randes. Wenn p auf Float eingestellt ist, wird der im IE festgelegte Rand verdoppelt. Dies ist ein Fehler, der in ie6 vorhanden ist. Die Lösung besteht darin, display:inline; zum Beispiel hinzuzufügen: <#p id="imfloat"> Das entsprechende CSS ist #IamFloat{ float:left; als 10px*/ display:inline;/*Unter IE wird es als 5px*/} verstanden

3. Doppelter Abstand generiert durch Floating IE #box{ float:left; width:0 0 0 100px; // In diesem Fall generiert IE einen Abstand von 200px display:inline; //Floats ignorieren} Lassen Sie uns im Detail über die beiden Elemente Block und Inline sprechen: Das Merkmal des Blockelements ist, dass es immer beginnt Eine neue Zeile, Höhe, Breite, Zeilenhöhe und Ränder können gesteuert werden (Blockelemente). Das Merkmal von Inline-Elementen ist, dass sie sich in derselben Zeile wie andere Elemente befinden und nicht gesteuert werden können (Inline-Elemente); block; //kann für Inline-Elemente simuliert werden display:inline; //Erzielen Sie den Effekt der Anordnung in derselben Zeile diplay:table; IE erkennt keine Probleme mit Breite und Höhe Die Definition von min-, aber tatsächlich wird die normale Breite und Höhe so verwendet, als ob es min gäbe. Dies wird zu einem großen Problem. Wenn Sie nur Breite und Höhe verwenden, ändern sich diese beiden Werte in einem normalen Browser nicht. Wenn Sie nur Mindestbreite und Mindesthöhe verwenden, werden Breite und Höhe überhaupt nicht festgelegt unter IE. Wenn Sie beispielsweise ein Hintergrundbild festlegen möchten, ist diese Breite wichtiger. Um dieses Problem zu lösen, können Sie Folgendes tun: #box{ width: 80px; height: 35px;}html>body 🎜>
5. Die Mindestbreite der Seite min -width ist ein sehr praktischer CSS-Befehl. Er kann festlegen, dass die Mindestbreite des Elements nicht kleiner als eine bestimmte Breite sein darf, um sicherzustellen, dass der Schriftsatz immer vorhanden ist richtig. Der IE erkennt dies jedoch nicht und behandelt die Breite tatsächlich als Mindestbreite. Damit dieser Befehl im IE funktioniert, können Sie ein

unter dem einfügen, dann eine Klasse für p angeben und dann das CSS wie folgt entwerfen: #container{ min-width: 600px; width :expression(document.body.clientWidth < 600? "600px": "auto" );} Die erste Mindestbreite ist normal, aber die Breite in Zeile 2 verwendet Javascript, das nur vom IE erkannt wird Dadurch wird Ihr HTML-Dokument weniger formal. Es implementiert tatsächlich die Mindestbreite durch Javascript-Beurteilung.

6.p Der schwebende IE-Text erzeugt einen 3-Pixel-Bug. Das linke Objekt ist schwebend und die rechte Seite wird mithilfe des linken Randes des äußeren Patches positioniert. Der Text im rechten Objekt ist 3 Pixel entfernt von links. #box{ float: left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //Dieser Satz ist der Schlüssel}

/p>

7 .IE-Versteckproblem Wenn die p-Anwendung komplex ist und in jeder Spalte einige Links vorhanden sind, tritt das Versteckproblem zu diesem Zeitpunkt leicht auf. Einige Inhalte können nicht angezeigt werden. Wenn die Maus diesen Bereich auswählt, wird festgestellt, dass sich der Inhalt tatsächlich auf der Seite befindet. Lösung: Verwenden Sie das Attribut „line-height“ für #layout oder verwenden Sie eine feste Höhe und Breite für #layout. Halten Sie die Seitenstruktur so einfach wie möglich.

8. float’s p-Verschluss; klare adaptive Höhe

① Zum Beispiel: <#p id="floatB" > <#p id=“ NOTfloatC“ >Das NOTfloatC hier möchte nicht weiter übersetzen, sondern nach unten gehen. (Die Attribute von floatA und floatB wurden auf float:left gesetzt;) Dieser Code hat im IE kein Problem, aber das Problem liegt in FF. Der Grund dafür ist, dass NOTfloatC kein Float-Label ist und das Float-Label geschlossen sein muss. Fügen Sie <#p class="clear"> zwischen <#p class="NOTfloatC"> hinzu muss mit den beiden konsistent sein. Es darf keine verschachtelte Beziehung zwischen p-Geschwistern mit Float-Attributen geben, da sonst eine Ausnahme auftritt. Und definieren Sie den Clear-Stil wie folgt: .clear{ clear:both;}

② Legen Sie als externer Wrapper die Höhe von p nicht fest, damit sich die Höhe automatisch anpasst Wrapper. Gehen Sie zu overflow:hidden; Wenn eine Box enthalten ist, die float enthält, ist die automatische Höhenanpassung unter IE ungültig. Zu diesem Zeitpunkt sollte das private Layout-Attribut von IE ausgelöst werden (das böse IE!). ; um dies zu erreichen. Ein Wrapper ist beispielsweise wie folgt definiert: .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③Für den Schriftsatz verwenden wir wahrscheinlich float:left. Manchmal müssen wir einen einheitlichen Hintergrund hinter dem float p in Spalte n erstellen, zum Beispiel:

left“>

Der Hintergrund der Seite wird blau, um die Hintergrundfarbe aller drei Spalten blau zu machen. Wir werden jedoch feststellen, dass die Höhe der Seite tatsächlich unverändert bleibt Grund Das Problem besteht darin, dass die Seite kein Float-Attribut ist und unsere Seite nicht auf Float gesetzt werden kann, da sie zentriert sein muss. Daher sollten wir das Problem wie folgt lösen:

” style=“float:left;width :100%“>

”right”>

Dann betten Sie einen Float left und p mit einer Breite von 100 % ein, um das Problem zu lösen (sehr wichtig! ) Informationen zum Prinzip des Clear-Floats finden Sie unter [So löschen Sie Floats ohne strukturelles Markup], fügen Sie den folgenden Code zu Global CSS hinzu und fügen Sie class="clearfix" zum zu schließenden p hinzu. Es funktioniert jedes Mal. /* Clear Fix */ .clearfix:after { content:"; display :both:hidden; */ .clearfix {display:block;} /* End hide from IE Mac * / /* end of clearfix */ Oder setzen Sie es wie folgt: .hackbox{ display:table //Zeigen Sie das Objekt als Block auf Elementebene an Tabelle}

11. Nichtanpassung der Höhe Die Nichtanpassung der Höhe liegt vor, wenn die Höhe des inneren Objekts nicht automatisch angepasst werden kann, insbesondere wenn das innere Objekt Rand oder Paddign verwendet. Beispiel: #box { } #box p {margin-top: 20px;margin-bottom: 20px }

Lösung: Fügen Sie zwei leere p-Objekte über und unter dem P-Objekt-CSS-Code hinzu: .1{height:0px;overflow:hidden;} oder fügen Sie das border-Attribut zu p hinzu.

12. Warum gibt es unter dem Bild eine Lücke? Es gibt viele Möglichkeiten, diesen Fehler zu beheben. Sie können das Layout des HTML-Codes ändern oder die Vertikale festlegen. Attribut nach „vertikal-align:top“ ausrichten. text/css">

14 . Es gibt einen Unterschied zwischen ID und Klasse, die in Webstandards definiert sind. 1. Die Duplizierung von IDs ist in Webstandards nicht zulässig. Beispielsweise darf pid="aa" nicht zweimal wiederholt werden, und die Klasse definiert eine Klasse , die theoretisch unendlich oft wiederholt werden kann, sodass Definitionen, die mehrere Referenzen erfordern, verwendet werden können. Die Priorität der ID ist höher als die der Klasse. Dies ist praktisch für Client-Skripte wie JS. Wenn Sie Skriptoperationen für ein Objekt auf der Seite ausführen möchten, können Sie dafür eine ID definieren. Andernfalls können Sie diese nur durch Durchlaufen der Seitenelemente und durch Angabe bestimmter Attribute finden Ressourcen und ist weitaus weniger einfach als eine ID.

15 Nachdem der Inhalt in LI die Länge überschreitet, verwenden Sie eine Ellipsen-Anzeigemethode. Diese Methode eignet sich für IE- und OP-Browser

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/* intLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */

13. Warum unterscheidet sich die Breite des Containers unter IE6 von der von FF? "Content-Type" content="text/html; charset=gb2312" / < p ōnclick="alert(this.offsetWidth)"> Der Unterschied besteht darin, ob die Breite des Der Rand ist in der Gesamtbreite des Containers enthalten. Hier interpretiert IE6 ihn als 200PX und FF wird als 220PX interpretiert. Was genau verursacht also das Problem? Wenn Sie die XML oben im Container entfernen, werden Sie feststellen, dass das ursprüngliche Problem hier liegt. Die Anweisung oben löst den Qurks-Modus und den Standardmodus des IE aus. Weitere Informationen finden Sie unter: http://. www.microsoft.com/china /msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true

IE6, IE7, FF IE7.0 ist draußen und es gibt neue Probleme mit der CSS-Unterstützung . Es gibt mehr Browser und die Kompatibilität von Webseiten wird immer schlechter. Um das Kompatibilitätsproblem von IE7.0 zu lösen, habe ich den folgenden Artikel gefunden: Jetzt verwende ich hauptsächlich !important zum Hacken, für ie6 und Firefox Der Test kann normal angezeigt werden, aber ie7 kann !important korrekt interpretieren, was dazu führt, dass die Seite nicht wie erforderlich angezeigt wird! Das Folgende ist eine Sammlung der Kompatibilität von drei Browsern: 20px; /*Für IE6*/ Achten Sie auf die Reihenfolge. Dies ist ebenfalls ein CSS-HACK, aber er ist nicht so einfach wie oben. #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example { color: #999; } /* IE7 */

!--[if IE 7] > ; !--[if lte IE 6]

Die dritte Methode ist die CSS-Filtermethode. Das Folgende ist eine klassische Übersetzung einer ausländischen Website. . Erstellen Sie einen neuen CSS-Stil wie folgt: #item { width: 200px; height: red } Erstellen Sie einen neuen CSS-Stil:

some text here< ; /p> Fügen Sie das lang-Attribut hier im Körperausdruck hinzu, das Chinesisch ist zh: Definieren Sie nun einen anderen Stil für das p-Element: *:lang(en) #item{ background:green !important; } Dies geschieht, um den ursprünglichen CSS-Stil mit !important zu überschreiben. Da der :lang-Selektor von IE7.0 nicht unterstützt wird, hat er unter IE6.0 keine Auswirkung erreicht, aber es ist sehr schwierig. Leider unterstützt Safari dieses Attribut nicht, daher müssen Sie den folgenden CSS-Stil hinzufügen: #item:empty {background: green !important }: Der leere Selektor ist eine CSS3-Spezifikation, obwohl Safari dies tut Wenn diese Spezifikation nicht unterstützt wird, wird die Auswahl dieses Elements unabhängig davon, ob dieses Element vorhanden ist, jetzt in allen Browsern außer IE grün angezeigt. Aus Gründen der Kompatibilität mit IE6 und FF können Sie das vorherige !important berücksichtigen. Ich persönlich bevorzuge die Verwendung von

Das obige ist der detaillierte Inhalt vonZusammenfassung der Lösung von CSS-Browser-Kompatibilitätsproblemen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!