Die Browserkompatibilität war schon immer ein häufiges Problem beim CSS-Layout, und Anfänger sind aus diesem Grund auf viele Missverständnisse gestoßen. Aufgrund meiner Erfahrung habe ich zwei Methoden zusammengefasst, um die meisten Browserkompatibilitätsprobleme zu vermeiden.
Diese beiden Methoden haben folgende Vorteile:
1. HACK muss nicht verwendet werden
2. Einfach und effektiv, Sie können es auf einen Blick verstehen
3. Hierarchischer und modularer Aufbau
4. Der Code ist sinnvoller und leichter zu identifizieren
Methode 1: Beheben Sie die schwebende Fehlausrichtung, die durch Hinzufügen von Innen- und Außenabständen verursacht wird
Normalerweise müssen wir Float verwenden, um DIVs in mehrspaltigen Layouts zu schweben. Normalerweise schreiben wir 3 DIVs für ein 3-Spalten-Layout. Wir hoffen, die folgenden Effekte zu erzielen:
.gif)
Um diesen Effekt zu erzielen, fügen wir einen Rand hinzu, damit die Spalte direkt beabstandet werden kann, und fügen außerdem einen Rahmen sowie einen Abstand hinzu, um zu verhindern, dass der Text im Inneren am Rand hängen bleibt. Doch nachdem der Code geschrieben wurde, geschah etwas Unerwartetes:
.gif)
Die dritte Spalte verlief unten. Dies ist nicht der gewünschte Effekt. Also lasst es uns analysieren. Folgen Sie der allgemeinen Idee. Die Gesamtbreite beträgt 800 Pixel, 200 Pixel für die linke Spalte, 400 Pixel für die mittlere Spalte und 200 Pixel für die rechte Spalte. Das sieht gut aus, aber zwischen diesen Spalten muss eine Lücke sein, also müssen Sie sie ändern: 190 Pixel für die linke Spalte, 400 Pixel für die mittlere Spalte und 190 Pixel für die rechte Spalte. Ist das in Ordnung?
Damit es aber besser aussieht, fügen Sie einen Rand hinzu. Aber ich habe vergessen, dass der Rand auch die Breite vergrößert. Außerdem haben Sie den Abstand der Spalte erhöht: 10 Pixel; die tatsächliche Breite beträgt also: Breite 200 – äußerer Abstand 10 – innerer Abstand 20 – Rand 2=168 , so dass es zu keiner Fehlausrichtung kommt. Aber finden Sie das nicht etwas kompliziert? Vielleicht brauchen Sie einen Taschenrechner. Bei einigen Browsern kann es bei diesem Layout zu Unterschieden in der Darstellung kommen.
Okay, lass uns über meine Methode sprechen. Entsprechend der hierarchischen Einteilung trenne ich Layout und Anzeige. Das Layout bedeutet, dass das Layout zusätzlich zur Breite und dem Float höchstens einen Außenabstand hinzufügt, damit es für mich einfacher zu berechnen ist. Dann fügen wir der Layoutspalte ein weiteres DIV hinzu, speziell für die Anzeige von Rändern, Innen- und Außenabständen usw. Sie müssen die Breite nicht definieren, sondern nur anpassen. Damit Sie es sich leichter merken können, habe ich ein Gedicht improvisiert: Die feste Breite sollte schwebend sein, keine Ränder oder Patches, fügen Sie ein DIV ein, und der definierte Stil wird funktionieren!
Methode 2: Lösen Sie das Problem, dass sich innere schwimmende Elemente von der äußeren Schicht lösen
Um einen Produktkatalog oder ein Fotoalbum zu erstellen, verwenden wir UL- oder N-DIVs zum Floaten. Der gewünschte Effekt ist wie folgt:
.gif)
Aber es ist seit Kurzem nach hinten losgegangen, die Anzeige sieht wie folgt aus und der äußere Rand ist nach oben verschoben:
.gif)
Die Lösung dieses Problems ist eigentlich sehr einfach.
1. Sie können der äußeren Ebene einen float:left; hinzufügen, um das Problem zu lösen.
2. Eine andere Methode besteht darin, am Ende ein DIV zu platzieren, um den Float zu löschen, nachdem der Float endet.
3. Fügen Sie der äußeren Ebene Höhe oder Breite hinzu.