Gründe und Lösungen für Firefox-Margin-Top-Fehler_Erfahrungsaustausch

Warum diese Beschreibung übersetzen? Jemand hat CSS2 übersetzt, aber nachdem ich es mir angesehen habe, ist es sehr grob (ich sage nicht, dass ich der Einzige bin, der Übersetzer ist wirklich bewundernswert! In letzter Zeit bin ich immer mehr mit CSS in Berührung gekommen). xhtml, aber je mehr es gibt, desto mehr Verwirrung entsteht.
Jetzt habe ich das Gefühl, dass viele Probleme überhaupt nicht als Probleme bezeichnet werden können. Der Grund liegt in unserem voreiligen Verständnis, dass das Töten eines Huhns mit einem Bullenmesser nicht unmöglich, aber unvernünftig und unangemessen ist. Das Erscheinungsbild wird falsch sein. Wenn Sie beginnen, das Problem vom Erscheinungsbild her zu lösen, ist es unvermeidlich, dass Sie immer verwirrt sind. Wie ich bereits sagte, müssen Sie bodenständig sein und dürfen nicht ungestüm sein.
In dieser Beschreibung bedeutet „reduzierte Ränder“: benachbarte Randattribute zwischen zwei oder mehr Boxmodellen (die Beziehung kann benachbart oder verschachtelt sein) (es darf kein leerer Inhalt, Füllbereich, Rahmen oder die Verwendung einer klaren Trennmethode sein) werden zusammengefasst und als ein einziger Rand dargestellt.
In CSS2.1 werden horizontale Ränder nicht reduziert.
Vertikale Ränder können bei einigen Boxmodellen reduziert werden:
1 Im regulären Dokumentenfluss werden benachbarte vertikale Ränder von 2 oder mehr Boxmodellen auf Blockebene reduziert.
Die endgültige Methode zur Berechnung des Margenwerts ist wie folgt:
a. Wenn alle Werte positiv sind, nehmen Sie den größten Wert.
b. Wenn nicht alle Werte positiv sind, nehmen Sie den absoluten Wert und subtrahieren Sie ihn Maximalwert vom positiven Wert.
c.
Hinweis: Angrenzende Boxmodelle können dynamisch aus DOM-Elementen generiert werden und haben keine Nachbar- oder Vererbungsbeziehung.
2. Wenn eines davon schwebend ist, wird der vertikale Rand nicht reduziert, auch nicht zwischen einem schwebenden Boxmodell und seinen untergeordneten Elementen.
3. Der Abstand zwischen dem Element mit gesetztem Überlaufattribut und seinen untergeordneten Elementen wird nicht reduziert (außer wenn der Überlaufwert sichtbar ist).
4. Bei Boxmodellen mit festgelegter absoluter Positionierung (position:absolute) werden vertikale Ränder nicht reduziert, auch nicht bei ihren untergeordneten Elementen.
5. Bei Elementen mit display:inline-block wird der vertikale Rand nicht reduziert, auch nicht bei den untergeordneten Elementen.
6. Wenn der obere und untere Rand eines Boxmodells aneinandergrenzen, kann es passieren, dass der Rand dadurch zusammenbricht. In diesem Fall hängt die Position des Elements davon ab, ob die Ränder seiner angrenzenden Elemente ausgeblendet sind.
a. Wenn der Rand eines Elements und der obere Rand seines übergeordneten Elements zusammengeklappt werden, ist die Randdefinition des oberen Rands des Boxmodells dieselbe wie die seines übergeordneten Elements.
b. Darüber hinaus ist das übergeordnete Element eines Elements nicht an der Randfaltung beteiligt, oder nur der untere Rand des übergeordneten Elements ist an der Berechnung beteiligt. Wenn der Rand oben des Elements ungleich Null ist, ist die Position des Rands oben des Elements dieselbe wie zuvor.
Der obere Rand eines Elements, auf das eine Clear-Operation angewendet wurde, wird niemals mit dem unteren Rand seines übergeordneten Elements auf Blockebene zusammenfallen.
Beachten Sie, dass die Position von Elementen, die durch die Falte abgedeckt wurden, keinen Einfluss auf die Position anderer Elemente hat, die reduziert wurden. Die Randposition „Rand oben“ ist nur erforderlich, wenn die untergeordneten Elemente dieser Elemente angeordnet werden.
7. Der vertikale Rand des Stammelements wird nicht reduziert.
Der Rand unten eines schwebenden Elements auf Blockebene grenzt immer an den Rand oben seines nächsten schwebenden Geschwisterelements auf Blockebene, es sei denn, dieses Geschwisterelement ist gelöscht.
Der obere Rand eines schwebenden Elements auf Blockebene grenzt an den oberen Rand seines ersten schwebenden untergeordneten Elements auf Blockebene (schwebendes erstes in Fluss befindliches untergeordnetes Element auf Blockebene) (wenn das Element keinen oberen Rand hat, kein padding-top und untergeordnete Elemente werden nicht gelöscht).
Wenn der Rand unten eines schwebenden Elements auf Blockebene die folgenden Bedingungen erfüllt, grenzt es an den Rand unten seines letzten untergeordneten Elements auf Blockebene an (wenn das Element weder padding-bottom noch Rand angibt). ):
a. Height:auto ist angegeben
b. min-height ist kleiner als die tatsächliche Höhe des Elements (height)
c. height)
Wenn die Mindesthöhe eines Elements auf 0 gesetzt ist, sind die Ränder, die es besitzt, benachbart und es hat weder border-top und border-bottom noch padding-top und padding-bottom Das Höhenattribut kann 0 oder Auto sein. Es kann kein Inline-Box-Modell (Linienbox) enthalten und die Ränder aller schwebenden untergeordneten Elemente (falls vorhanden) grenzen aneinander.
Wenn der Rand, der einem Element gehört, reduziert wird und es die Löschoperation verwendet, wird sein oberer Rand mit dem angrenzenden Rand des unmittelbar folgenden Geschwisterelements reduziert, aber das Ergebnis ist, dass sein Rand nicht mit seinem übereinstimmt Rand. Rand-unterer Zusammenbruch von übergeordneten Elementen auf Blockebene.
Der Faltvorgang basiert auf den Werten für Polsterung, Rand und Rand (d. h. nachdem der Browser alle diese Werte analysiert hat, überschreibt die Berechnung des gefalteten Randes die verschiedenen verwendeten Randwerte).

Code kopieren Der Code lautet wie folgt:

<div id="d0" style="background-color:#333333;height:500px;">
// Ohne die br-Linie hinzuzufügen, wirkt sich margin-top:20px von id1 in FIREFOX auf d0 aus, sodass zwischen der Oberseite von d0 und dem Körper eine Lücke von 20 Pixeln besteht und zwischen d1 und keine Lücke besteht die Oberseite von d0, während in der IE-Normalanzeige
<div id="d1" style="background-color:#000000;margin-top:20px;height:100px;"></div> 🎜><div id=" d2" style="background-color:#000000;margin-top:20px;height:100px;"></div>
</div>