Gründe und Lösungen für die Fehlausrichtung von HTML-Webseiten

Wir stoßen oft auf die Notwendigkeit, das Layout derselben Zeile festzulegen, aber es ist aus verschiedenen Gründen fehl am Platz. Ich habe zusammengefasst, dass es wahrscheinlich zwei Gründe für die Fehlausrichtung des Webseitenlayouts gibt Analyse der Gründe und Lösungen.

Häufig stoßen wir auf ein Layout, das wir in einer Reihe anzeigen möchten, aber es ist aus verschiedenen Gründen falsch ausgerichtet. Das Ergebnis ist, dass das Layout des letzten Felds in einer Reihe falsch ausgerichtet ist und

Es gibt wahrscheinlich zwei Gründe für die Fehlausrichtung des DIV-CSS-Webseitenlayouts. Der eine ist ein Fehler bei der Breitenberechnung und der andere wird durch IE-FEHLER verursacht, insbesondere IE6 und IE7. Als nächstes stellen wir Ihnen die Luxation und die Methoden zur Lösung der Luxation vor.

Lösung für den Breitenberechnungsfehler

Breitenberechnungsfehler Wenn die Gesamtbreite 500 Pixel beträgt und es 3 Felder mit CSS-Breiten von 200 Pixel, 200 Pixel bzw. 100 Pixel gibt, wird dies in einer Reihe angezeigt ohne Probleme. Es wird nicht verlegt, aber wenn Sie CSS-Ränder, Padding und Rand-Attribute hinzufügen, vergessen Sie nicht die Breite, die diese Attribute einnehmen. Ignorieren Sie insbesondere nicht den durch Innenabstände und Ränder eingenommenen Breitenraum. Wenn ein Feld mit einem linken und einem rechten Rand hinzugefügt wird, gibt es zu diesem Zeitpunkt ein Feld, in dem die Breite genau richtig ist und die vom Rand eingenommene Breite um 2 Pixel verringert wird. Andernfalls ist die Gesamtbreite der drei Felder größer größer als die Gesamtbreite, was zu einer Fehlausrichtung führt.

Zusammenfassung der durch Breitenprobleme verursachten CSS-Layout-Fehlausrichtung:

Die Summe der inneren Boxbreiten ist größer als die äußere Breite, was zu einer Fehlausrichtung führt. Bei der Überprüfung müssen wir die Summe der Menge berechnen Breite, Rand, Paddind und Rand.

IE-FEHLER, insbesondere IE6 und IE7, der eine Fehlausrichtung verursacht

Dieses Problem ist das häufigste Problem. Wir haben das erste Breitenproblem überprüft und die Breite ist derzeit kein Problem. In IE6 und IE7 gibt es keine Fehlausrichtung in IE8 und anderen Browsern. Zu diesem Zeitpunkt müssen wir überlegen, ob Sie das Margin-Attribut CSS float verwenden. css float) Die Verwendung von margin (margin-right margin-left, insbesondere dieses Attribut hier) erzeugt doppelte Werte. Zu diesem Zeitpunkt müssen wir CSS-Hack verwenden, um dieses Problem zu lösen. Lassen Sie IE6 oder IE7 nur den angegebenen Randstil erkennen.

Zum Beispiel:

1. IE6 wird separat erkannt (margin-left ist nur für IE6 falsch ausgerichtet)

{margin-left:5px;_margin-left:2px}

Zurzeit setzen andere Browser außer IE6 margin-left:5px und IE6 erkennt _margin-left:2px separat

2. Sowohl IE7 als auch IE6 erkennen (margin-left wird von erkannt). IE6 und IE7 erkennen andere Versionen und Markenbrowser, ohne sie zu unterscheiden Browser gehen davon aus, dass margin-left:5px, IE6 und IE7 *margin-left:2px erkennen

Verwandte Lektüre:

Detaillierte Erklärung des Unterschieds zwischen HTML und XHTML

Js bietet allgemeine Möglichkeiten, Stile zu erhalten

Das obige ist der detaillierte Inhalt vonGründe und Lösungen für die Fehlausrichtung von HTML-Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!