Problem mit der Überlappung des oberen und unteren Randes bei der Übertragung

Ich habe herausgefunden, dass die Zwangsstörung für mich wirklich eine schwere Krankheit ist. . . Alle Situationen müssen jedes Mal getestet werden. . . ABER!!!!!!!!!Das Traurige ist, ich kann mich nicht an so viele Situationen erinnern. . . Ich muss beim Schreiben von Code immer noch Fehler machen und Fehler beheben ~ Ich kann mich selbst nicht mehr ertragen! Aber fassen wir diesen Teil hier zusammen~

Die folgenden Teile sollten alle Situationen von Randüberlappungsproblemen abdecken:

1. Die Ränder über und unter gewöhnlichen Elementen werden zu einem Rand zusammengeführt, egal welcher gewählt wird!

Bei zwei schwebenden Elementen tritt nicht das Problem der Randübertragung auf. Der Rand unten des oberen Elements und der Rand oben des unteren Elements werden weiterhin als Randwert zwischen den beiden addiert.

2. Wenn zwei Elemente enthalten sind, werden auch die oberen und unteren Randwerte des übergeordneten Elements und des untergeordneten Elements zusammengeführt (empfohlenes Lernen: CSS-Video-Tutorial)

当父元素不加边框，不设置宽高，即父级没有触发haslayout时	IE6、7和标准浏览器下，均会发生margin传递问题子元素和父元素的高度相同（子元素的top将和父元素的top在一条直线上，bottom将和父元素的bottom在一条直线上）而父元素则选择两者之间大的数值作为父元素的margin-top值和margin-bottom值！！！ 子元素的margin-left和margin-right值依然存在
当父元素不加边框，但是，设置宽或高或zoom：1；即父级加可以触发haslayout的属性时	标准浏览器下，会发生margin传递但是在IE6、7下则不会发生margin传递（即子元素的margin就是相对于父元素的，不会传递给父级）
当父级加边框，并且父级没有触发haslayout时	标准浏览器下，不会发生margin传递IE6、7下，子元素的margin彻底消失！
当父级加边框，并且父级触发haslayout（即加width或height或zoom：1）时，	IE6、7和标准浏览器下，都不会发生margin传递！！！

Wenn das übergeordnete Element Das Element fügt keinen Rahmen hinzu und die Breite ist nicht hoch eingestellt. Das heißt, wenn das übergeordnete Element kein Haslayout auslöst

IE6, 7 und Standardbrowser, es treten Randübertragungsprobleme auf. Die Höhe des untergeordneten Elements und des übergeordneten Elements ist gleich (die Oberseite des untergeordneten Elements befindet sich in eine gerade Linie mit der Oberseite des übergeordneten Elements und die Unterseite eine gerade Linie mit der Unterseite des übergeordneten Elements) Das übergeordnete Element wählt den größeren Wert zwischen den beiden als Rand-Oberer-Wert und Rand-Unterer-Wert von aus das übergeordnete Element! ! ! Die Werte margin-left und margin-right der untergeordneten Elemente sind noch vorhanden

Wenn das übergeordnete Element keinen Rahmen hinzufügt, sondern die Breite, Höhe oder den Zoom festlegt: 1; das heißt, wenn das übergeordnete Element ein Attribut hinzufügt, das Haslayout auslösen kann td>

Unter Standardbrowsern findet eine Margin-Übertragung statt, aber unter IE6 und 7 findet keine Margin-Übertragung statt (d. h. der Rand des untergeordneten Elements ist relativ zum übergeordneten Element) wird nicht an das übergeordnete Element übergeben)

Wenn das übergeordnete Element Wenn der Ebene ein Rahmen hinzugefügt wird und das übergeordnete Element kein Haslayout auslöst

Unter Standardbrowsern ist dies nicht der Fall. Wenn der Rand an IE6 und 7 übergeben wird, verschwindet der Rand des untergeordneten Elements vollständig!

Wenn das übergeordnete Element einen Rahmen hinzufügt und das übergeordnete Element haslayout auslöst (Das heißt, fügen Sie Breite oder Höhe oder Zoom hinzu: 1),

IE6, 7 und Standardbrowser, Es erfolgt keine Margin-Lieferung! ! !

Für IE6 und 7:

Das heißt, solange haslayout ausgelöst wird, spielt es keine Rolle, ob dem übergeordneten Element ein Rahmen hinzugefügt wird oder ob ein Rand vorhanden ist wird in Standardbrowsern übergeben und findet unter IE6 und 7 nicht statt! ! !

Und für Standardbrowser:

Nur ​​das Hinzufügen eines Rahmens kann das Überspringen von Rändern verhindern! ! !

Fügen Sie dem übergeordneten Element einen Rahmen hinzu. Dann befindet sich am Rand zwischen dem untergeordneten Element und dem übergeordneten Element eine Trennlinie, und es findet keine Zusammenführung statt! Wenn Sie einem untergeordneten Element einen Rahmen hinzufügen, sind die Randwerte der beiden immer noch nicht getrennt, sodass es immer noch zu Überlappungen kommt!

Wenn das übergeordnete Element hier mehrere Block-Unterelemente enthält und sich der obere und untere Rand zwischen den einzelnen Unterelementen überlappen, wählen Sie den größeren Rand zwischen den beiden als den Rand zwischen den beiden, dem ersten Unterelement Der obere Teil des Elements überlappt mit dem übergeordneten Element (der weiße Bereich über dem linken Bild ist der weiße Bereich vom oberen Rand des Browsers), und der untere Teil des letzten untergeordneten Elements überlappt mit dem übergeordneten Element. Die Anzeigeeffekte von IE6, 7 und Standardbrowsern sind wie links dargestellt.

Wenn die beiden Blockelemente zu diesem Zeitpunkt schwebende Elemente sind, findet keine Randübertragung zwischen dem untergeordneten Element und dem übergeordneten Element statt. Zu diesem Zeitpunkt sind die oberen und unteren Randwerte ​liegen dazwischen. Die jeweiligen Randwerte werden addiert! Der Standardbrowser wird wie im Bild unten gezeigt angezeigt, und IE6 wird wie rechts im Bild unten angezeigt. Aber warum unterscheidet sich die Anzeige?

Weil, OMG! Eine Welle folgt der anderen! Blockelemente, horizontale Ränder und Floats haben ein neues Kompatibilitätsproblem in IE6 verursacht – den Double-Margin-Bug (beachten Sie, dass IE7 keinen Double-Margin-Bug hat!!!!)

Also

In der Praxis müssen Sie zunächst das Attribut, das haslyout auslöst, zum übergeordneten Element hinzufügen! Dieser Artikel stellt sicher, dass unter IE6 und 7 keine Probleme mit der Margin-Übertragung und dem Verschwinden von Margin-Werten auftreten.

Bedenken Sie dann, dass unter Standardbrowsern das Problem gelöst werden kann Kein Rand. Beim Hinzufügen eines Floats tritt ein Problem mit der Margin-Übertragung auf. Das Hinzufügen eines Floats zu diesem Zeitpunkt führt jedoch zu einem Double-Margin-Fehler in IE6. Daher versuchen wir in der Praxis, den Margin des Floating-Block-Elements durch zu ersetzen padding. Wenn es nicht geändert werden kann, fügen Sie display: inline zum Element hinzu.

3. Es gibt keinen Randwert zwischen der Ober- und Unterseite der beiden Divs (A, B), aber es gibt ein Unterelement in A, das einen Randwert hat des Unterelements wird an die beiden übergeben. Füllt den Rand zwischen den beiden Elementen A und B aus, nur in vertikaler Richtung! ! !

Für diese Frage ist es eigentlich ganz einfach. Tatsächlich ist die Zusammenfassung der Inhalt der obigen Zusammenfassung.

Ich habe das Gefühl, dass diese Randübertragung und Überlappung darauf zurückzuführen ist, dass zwischen den beiden Randwerten keine Grenze besteht oder der Randbereich durch Auffüllen getrennt wird! ! ! !

Das obige ist der detaillierte Inhalt vonProblem mit der Überlappung des oberen und unteren Randes bei der Übertragung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!