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: 8a5cf3dcbde2cddfb719b2644eb32a80 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 e388a4556c0f65e1904146cc1a846bee unter dem 6c04bd5ca3fcae76e30b72ad730ca86d 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 7012a8aedabbdd391f4694144720ea7c94b3e26ee717c64999d7867364b1b4a3 /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: ce89d2e8d7b032654f6c53c9d59b5506 6e252dd2711ce09d6f508a394843ead1Das 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 90baf45d635c532297912d259bba740d zwischen 76e3c42bfcaf55e241356211d1e51974 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: 75598ae0912b4c03dd28a6ab100b9481 left“>94b3e26ee717c64999d7867364b1b4a3 da3fca78d35a0a1e604ebd54ce152ff994b3e26ee717c64999d7867364b1b4a3 42c4f41baaa1555b790f62fd7dc3363d94b3e26ee717c64999d7867364b1b4a3 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: 126d478ee6d0815d3227b9c84b952a1c ” style=“float:left;width :100%“> 2483f32322905af11030bc28f8cd233894b3e26ee717c64999d7867364b1b4a3 da3fca78d35a0a1e604ebd54ce152ff994b3e26ee717c64999d7867364b1b4a3 ”right”>94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3 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 } 753396aab491b64ee4772d02f5086612 94b3e26ee717c64999d7867364b1b4a3 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"> a5973b8a9c871d4666e7c92d3fe744f2 531ac245ce3e4fe3d50054a55f265927

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-Browser11c6b9a105a1d9ddb712796d6febda24 0131b5daf5d1472e928cfe70f811a973 62bd2fb5bf4db34fc65b81c061e0e4ce 531ac245ce3e4fe3d50054a55f265927 4df436957366b6ed1040126fa5a89c56aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa94b3e26ee717c64999d7867364b1b4a3 0d20824b412c474fd1dfb16e6b8dbc6d /* 820e02f229f4e29afaa637c15b28fe5dintLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */ 283ead764fe6cb05d142a40edcf84695

13. Warum unterscheidet sich die Breite des Containers unter IE6 von der von FF? "Content-Type" content="text/html; charset=gb2312" / 080b747a20f9163200dd0a7d304ba388 border:10px solid red } --> 531ac245ce3e4fe3d50054a55f265927 d52fd8d9710bb07ef17446f5b39c54ca 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 */

e7d5a3834d188c3cb5a61fee55d83ca0 1325033f74410c73959088ed41585e69!--[if IE 7] > ; 5900914a1563c8547b571777d706aa41 f33a1fb071f9d42dadea506304822a5b !--[if lte IE 6]a2f7a80eaad4226a885a2b62ffd9e321 1b771f47d72d900ba74308aee59557f0

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: 8c6eab477ea811b2aef0ea66ce72bc0dsome text heree52cb252103bc60f1d79f0d975d4ed20 Fügen Sie das lang-Attribut hier im Körperausdruck hinzu, das Chinesisch ist zh: af4276b4335489c3ca10bfad9c6fbf29 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!