Über den Unterschied zwischen DIV-Margin-Attributen in Chrome und IE

Dieser Artikel stellt hauptsächlich den Unterschied zwischen DIV-Margin-Attributen in Chrome und IE vor. Jetzt kann ich ihn mit Ihnen teilen.

Plötzlich, im Layout Was unter Chrome ordentlich aussieht, wird unter IE zu einem Chaos. Um den Grund herauszufinden, habe ich einige Tests durchgeführt und sie veröffentlicht, um sie mit allen zu teilen

Plötzlich verwandelte sich das Layout, das unter Chrome ordentlich aussah, unter IE in ein Durcheinander. Um herauszufinden, warum, habe ich die Eigenschaft „Hintergrundfarbe“ von p geändert. Schließlich habe ich festgestellt, dass die Breite desselben p unter IE und Chrome unterschiedlich ist. Nachts ist es so gruselig!
Danach habe ich einen Test gemacht. Wann:

p1 
{ 
width:960px; 
margin:0px; 
padding:0px; 
}

Zu diesem Zeitpunkt gibt es keinen Unterschied zwischen den beiden Browsern! Die Gesamtbreite beträgt 960px.
Aber wenn:

p1 
{ 
width:960px; 
margin:0px; 
padding:0px 10px 0px 10px; 
}

Zu diesem Zeitpunkt funktioniert Chrome nicht mehr. Sie hat tatsächlich 20 Pixel an der Außenseite hinzugefügt, sodass die Gesamtbreite von p1 960 Pixel + 10 Pixel + 10 Pixel = 980 Pixel beträgt. Die Breite von p1 im IE beträgt jedoch immer noch 960 Pixel sollte in der Breite enthalten sein, ich hätte nicht erwartet, dass Chrome so stur ist.
Nach dem Test ist der Rand dasselbe wie der Abstand, und der Randwert wird außerhalb der „Breite“ berechnet.
Außerdem behandelt Chrome p1 als position: absolute und IE als position: relative, wenn float nicht festgelegt ist. Versuchen Sie daher, den float dieses Elements auf Blockebene auf left zu setzen.
Es ist so traurig, dass die Browser-Inkompatibilität mich, einen Laien, sehr unglücklich macht!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Implementierung der @keyframes-Animation in CSS3

Klicken Sie auf den Schaltflächentext, um ihn in ein Eingabefeld zu verwandeln. Klicken Sie auf „Speichern“. Implementierung der Umwandlung in Text

Einführung in die mobile Web-Bildschirmanpassung (rem)

Das obige ist der detaillierte Inhalt vonÜber den Unterschied zwischen DIV-Margin-Attributen in Chrome und IE. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!