Gründe und Lösungen für das Scheitern von Firefox Margin-Top

Warum sollten wir 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 Rand zwischen dem Element mit dem gesetzten Überlaufattribut und seinen untergeordneten Elementen wird nicht gefaltet (außer wenn der Überlaufwert sichtbar ist).
4. Bei Boxmodellen mit festgelegter absoluter Positionierung (position:absolute) werden die vertikalen Ränder nicht reduziert, auch nicht zwischen ihnen und ihren untergeordneten Elementen.
5. Bei Elementen mit display:inline-block wird der vertikale Rand nicht reduziert, auch nicht zwischen ihren 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 des übergeordneten Elements.
b. Darüber hinaus nimmt das übergeordnete Element eines Elements nicht an der Randfaltung teil, oder nur der untere Rand des übergeordneten Elements nimmt an der Berechnung teil. Wenn der Rand oben des Elements ungleich Null ist, ist die Position des Rand oben des Elements dieselbe wie zuvor.
Der obere Rand eines Elements, auf das eine Löschoperation 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 Position „Rand oben“ ist nur erforderlich, wenn die untergeordneten Elemente dieser Elemente angeordnet werden.
7. Der vertikale Rand des Stammelements wird nicht reduziert.
Der untere Rand eines schwebenden Elements auf Blockebene grenzt immer an den oberen Rand des schwebenden nächsten Geschwisterelements auf Blockebene im Fluss (Floated Next Inflow-Geschwisterelement auf Blockebene), es sei denn, es handelt sich um ein Geschwisterelement verwendet eine klare Operation.
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 (sofern 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).

<div id="d0" style="background-color:#333333;height:500px;"> 
<br style="line-height:0;"/> 
//不加入br这一行，在FIREFOX中id1的margin-top:20px将会在d0上作用，使d0上方与body间有20px的间距,d1与d0的上方没有间距，而IE内正常显示 
<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>

Weitere Artikel zu den Ursachen und Lösungen von Firefox-Margin-Top-Fehlern finden Sie auf der chinesischen PHP-Website!