Probleme mit der CSS-Browserkompatibilität behoben

Die Kompatibilität von CSS mit Browsern bereitet den Leuten manchmal Kopfschmerzen. Wenn Sie die Techniken und Prinzipien verstehen, wird es nicht schwierig sein, die Kompatibilitätsmethoden von IE7, 6 und Fireofx für den Übergang zu ermitteln Für Web2.0 versuchen Sie bitte, Code im xhtml-Format zu schreiben. Da es sich um einen W3C-Standard handelt, muss DOCTYPE hinzugefügt werden

Vertikales Zentrierungsproblem von 1.p Vertical-align:middle; Erhöhen Sie den Zeilenabstand auf die gleiche Höhe wie das gesamte p line-height:200px. Fügen Sie dann den Text ein und er wird vertikal zentriert. Der Nachteil besteht darin, dass der Inhalt ohne Zeilenumbrüche kontrolliert werden muss

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


3. Doppelter Abstand, der durch Floating erzeugt wird, dh

 
#box{ float:left; width:100px; margin:0 0 0 100px //In diesem Fall generiert IE einen Abstand von 200px display:inline; //Float ignorieren} Lassen Sie uns im Detail über die beiden Elemente Block und Inline sprechen: Das Merkmal des Blockelements besteht darin, dass es immer in einer neuen Zeile beginnt und Höhe, Breite, Zeilenhöhe und Ränder alle gesteuert werden können (Blockelement). des Inline-Elements ist das, und andere Die Elemente befinden sich in derselben Zeile und können nicht gesteuert werden (eingebettete Elemente); #box{ display:block; //Kann Inline-Elemente als Blockelemente simulieren display:inline; //Erzielen Sie den Effekt der Anordnung in derselben Zeile diplay:table; Frage


IE erkennt die Definition von min- nicht, behandelt aber tatsächlich die normale Breite und Höhe so, als ob es ein Minimum gäbe. Dies ist ein großes Problem. Wenn Sie nur Breite und Höhe verwenden, ändern sich diese beiden Werte in einem normalen Browser nicht. Wenn Sie nur Mindestbreite und Hö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 Die Mindestbreite der Seite

 
min-width ist ein sehr praktischer CSS-Befehl. Er kann festlegen, dass die Mindestbreite eines Elements nicht kleiner als eine bestimmte Breite sein darf, sodass das Layout immer korrekt ist. Der IE erkennt dies jedoch nicht und behandelt die Breite tatsächlich als Mindestbreite. Um diesen Befehl auch im IE verfügbar zu machen, 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; die Breite in der zweiten Zeile verwendet jedoch Javascript, das nur vom IE erkannt wird, wodurch Ihr HTML-Dokument auch weniger formal wird. Es implementiert tatsächlich die Mindestbreite durch Javascript-Beurteilung.
6.p Floating IE-Text erzeugt einen 3-Pixel-Bug


Das Objekt auf der linken Seite wird verschoben und das rechte wird mithilfe des linken Rands des äußeren Patches positioniert. Der Text innerhalb des Objekts auf der rechten Seite wird 3 Pixel vom linken entfernt #box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //Dieser Satz ist der Schlüssel}

7. IE-Versteckspiel


Wenn die p-Anwendung komplex ist, gibt es in jeder Spalte einige Links, und zu diesem Zeitpunkt tritt leicht das Versteckproblem 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 p-Verschluss; klare adaptive Höhe;①Zum Beispiel: <#p id=“floatA“ ><#p id=“floatB“ ><#p id=“NOTfloatC“ >NOTfloatC möchte hier nicht weiter übersetzen, sondern gehen untere Reihe. (Die Attribute von floatA und floatB wurden auf float:left gesetzt;)
Dieser Code funktioniert im IE einwandfrei, 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. Es darf keine verschachtelte Beziehung zwischen p-Geschwisterattributen geben Ausnahme wird auftreten. Und definieren Sie den klaren Stil wie folgt: .clear{ clear:both;}

② Stellen Sie als externer Wrapper keine feste Höhe ein. Um eine automatische Höhenanpassung zu ermöglichen, fügen Sie einen Überlauf hinzu: Wenn eine Float-Box enthalten ist, ist die automatische Höhenanpassung unter IE ungültig Das Layout-Privatattribut (der böse IE!) kann zu diesem Zeitpunkt mit zoom:1; ausgelöst werden, wodurch Kompatibilität erreicht wird.
Ein Wrapper ist beispielsweise wie folgt definiert:
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③Für den Schriftsatz ist die von uns am häufigsten verwendete CSS-Beschreibung wahrscheinlich float:left. Manchmal müssen wir einen einheitlichen Hintergrund hinter dem float p in Spalte n erstellen, zum Beispiel:

Beispielsweise möchten wir den Hintergrund der Seite auf Blau einstellen, sodass die Hintergrundfarbe aller drei Spalten blau ist. Wir werden jedoch feststellen, dass die Seite tatsächlich die gleiche Höhe behält, wenn sie sich nach unten erstreckt Der Grund dafür ist, 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

Dann wird ein Float links eingebettet und die Breite beträgt 100 % p, um das Problem zu lösen

④Universeller Schwimmerverschluss (sehr wichtig!)
Informationen zum Prinzip des Clear Float 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.
/* Fix löschen */
.clearfix:after { content:"."; display:block; height:0; clear:both; .clearfix { display:inline-block }
/* Vor IE Mac verstecken */
.clearfix {display:block;}
/* End hide from IE Mac */
/* Ende von Clearfix */
Oder stellen Sie es so ein: .hackbox{ display:table; //Zeigen Sie das Objekt als Tabelle auf Blockelementebene an}

Das obige ist der detaillierte Inhalt vonProbleme mit der CSS-Browserkompatibilität behoben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!