Lösung für das Problem, dass das Festlegen von margin-top im inneren DIV nicht funktioniert

(1)

Als ich kürzlich an einer anderen Website arbeitete, stieß ich erneut auf dieses Problem und beschloss, es sorgfältig zu untersuchen und zu lösen.

Der Code lautet wie folgt:

Obere Ebene

margin-top:200px;">Sub-layer

Der ideale Effekt ist, dass die Die übergeordnete Ebene und der Rahmen der oberen Ebene zeigen, dass die untergeordnete Ebene 200 Pixel von der Oberseite der übergeordneten Ebene entfernt ist, was im IE normal ist. In FF liegt jedoch ein Problem vor Die Ebene und die obere Ebene sind 200 Pixel voneinander entfernt.

Ich war verwirrt, also habe ich mich an Google gewandt und den folgenden Satz erhalten:

Wenn zwei Container verschachtelt sind, wenn sich zwischen dem äußeren Container und dem inneren Containerelement nichts anderes befindet , wendet Firefox den Rand oben des inneren Elements auf das übergeordnete Element an.

Das heißt, da die untergeordnete Ebene das erste nicht leere untergeordnete Element der übergeordneten Ebene ist, tritt dieser Fehler bei Verwendung von margin-top auf.

Es gibt zwei Lösungen:

1. Verwenden Sie Floating, um das Problem zu lösen, das heißt, ändern Sie den Sub-Layer-Code in:

Sublayer

2. Verwenden Sie padding-top, um das Problem zu lösen, das heißt:

Sub-layer

(2)

Häufig kann ein solches Problem auftreten, das heißt, die Höhe und Breite der äußeren Ebene p sind festgelegt, und das Festlegen von maring-top auf der inneren Ebene p funktioniert nicht (getestet in FIREFOX und IE8). ist ungefähr so, dass die innere Schicht p das Layout nicht erhält. Zum Beispiel der folgende Code:

< p class = "cp">

Der Test ergab, dass der Rand oben von bp nicht funktioniert und der Anzeigeeffekt immer noch 0 Pixel beträgt. Wenn Sie Firebug verwenden, um es in Firefox anzuzeigen, können Sie sehen, dass margin-top einen Wert von 10 Pixel hat. Die Lösung für das Problem lautet wie folgt:

1. Ändern Sie margin-top in padding-top , aber die Voraussetzung ist, dass die innere Schicht Das p hat keinen Randsatz

2. Fügen Sie padding-top zum äußeren p hinzu

3. Fügen Sie das äußere p hinzu:

A, float: left or rechts

B, Position: absolut

C, Anzeige: Inline-Block oder Tabellenzelle oder anderer Tabellentyp

D,

Überlauf

: versteckt oder automatisch

Zum Beispiel können Sie den obigen Code wie folgt ändern:

< /p>

Hinweis: Fügen Sie danach einen

clear float

hinzu.

Das obige ist der detaillierte Inhalt vonLösung für das Problem, dass das Festlegen von margin-top im inneren DIV nicht funktioniert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!