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:
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
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!
