Beim Layout von Webseiten sollten Kompatibilitätsprobleme mit IE6 berücksichtigt werden

Die folgende Abbildung zeigt die Browser-Anzeigerate in den Besucherdetails in unserem Website-Statistiksystem, IE6 macht mehr als 40 % aus. Obwohl es viele Browsertypen gibt, gibt es allein vom Internet Explorer mehrere Versionen, beispielsweise IE5.5, IE6, IE7, IE8 usw. Unter diesen vielen Hochversionen ist IE6 bei den meisten Benutzern immer noch beliebt. Daher müssen Sie beim Satz die Kompatibilität von IE6 berücksichtigen, da Sie sonst viele Besucher verlieren.

Hier sind 10 Probleme, auf die Sie bei IE6 achten müssen:

1. Verwenden Sie DOCTYPE
Sie müssen den DOCTYPE-Typ oben auf der HTML-Seite hinzufügen. Natürlich wird die strikte Version empfohlen, zum Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Oder für eine XHTML-Seite: !DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Das Letzte, was Sie wollen, ist, dass der IE6 in den Mackenmodus wechselt – und Macken hat er schon genug.

2. Position festlegen: relativ
Das Festlegen von „position:relative“ löst mehr als ein Problem, insbesondere wenn die Ausrichtung festgelegt werden muss. Natürlich müssen Sie verstehen, dass die absolute Positionierung relativ ist. Vielleicht wissen Sie nicht, wohin alles geflossen ist, weil Sie es nicht eingerichtet haben. Sie haben beispielsweise vor jedem Artikel ein Bild entworfen, am Ende jedoch festgestellt, dass sich auf der Seite nur ein Bild befand oder sich die Bilder möglicherweise überlappten.

3. Legen Sie den Wert display:inline für schwebende Elemente fest Dies liegt am bekannten IE6-Fehler mit doppeltem Rand. Wenn Sie beispielsweise ein schwebendes DIV erstellt und margin-left:5px; festgelegt haben, lautet der Wert in IE6 wahrscheinlich margin-left:10px. Hier kann das Festlegen von display:inline; für das schwebende Element das Problem lösen.

4. Legen Sie hasLayout für das Element fest
Viele IE6- (oder IE7-)Probleme können durch Festlegen des hasLayout-Werts gelöst werden. (Wenn Sie nicht wissen, was hasLayout ist, schauen Sie hier nach)

Die einfachste Möglichkeit, den hasLayout-Wert eines Elements festzulegen, besteht darin, CSS-Höhe oder -Breite hinzuzufügen (natürlich kann auch Zoom verwendet werden, aber das ist nicht Teil von CSS). Es wird empfohlen, einen bestimmten Wert festzulegen, aber manchmal kennen Sie die Höhe nicht unbedingt. Hier können Sie height:1% verwenden. Wenn für das übergeordnete Element keine Höhe festgelegt ist, ändert sich die physische Höhe des Elements nicht. Es verfügt jedoch bereits über die Eigenschaft „hasLayout“.

5. Lösen Sie das Problem mit sich wiederholenden Zeichen. Komplexe Layouts können dazu führen, dass Text in einigen schwebenden Elementen unterhalb der freigegebenen Schwebeposition angezeigt wird. Dies ist ein merkwürdiges Problem. So können Sie es lösen:

• Stellen Sie sicher, dass für das schwebende Element die Option „display:inline“ festgelegt ist.
•Verwenden Sie margin-right:-3px in schwebenden Elementen;
• Fügen Sie nach dem letzten Element des Floats einen IE-Kommentar ein, zum Beispiel: 
• Füge dem letzten Element ein DIV hinzu (dieses kann auf 90 % Breite oder etwas Ähnliches eingestellt werden)
UPDATE: Am einfachsten geht das, wenn Sie einfach alle Kommentare entfernen. (Danke an Tian Weier für den Tipp. Ich selbst bin noch nicht auf dieses Problem gestoßen, habe aber nach einer Suche bei Google festgestellt, dass das Problem auch mit dieser Methode gelöst werden kann und dass es sich um eine empfehlenswerte Methode handelt.)

Mehr dazu können Sie auf positioniseverything.net lesen.

6. Verwenden Sie Hover nur im <a>-Tag. IE6 unterstützt nur das <a>-Tag, um den Hover-Stil anzuzeigen. Natürlich können Sie immer noch JS verwenden, um dieses Problem zu lösen. Dies wirft jedoch die Frage der Zugänglichkeit auf. Es wird empfohlen, im per JS implementierten Hover keine wichtigen Inhalte zu setzen.

7. Verwenden Sie !important oder erweiterte Selektoren, um IE-Browser zu unterscheiden . Beispielsweise kann min-height die Verwendung von CSS vermeiden, um Kompatibilität mit IE zu erreichen.

#element {
Mindesthöhe: 20em;
Höhe: auto !wichtig;
Höhe: 20em; /* IE6 soll diese Höhe anzeigen */
}

IE6 kann die Mindesthöhe nicht richtig erkennen. Sie können daher eine feste Höhe festlegen, sodass IE6 sie als 20 em interpretieren kann. Trotzdem ändert sich die Höhe, wenn der Inhalt größer wird. Ein anderer Ansatz besteht darin, erweiterte Selektoren zu verwenden:

#element {
Mindesthöhe: 20em;
Höhe: 20em;
}
/* IE6 ignorieren */
#element[id] {
Höhe: automatisch;
}

8. Vermeiden Sie proportionale Größen. Proportionale Größen verwirren IE6, sofern Sie dem übergeordneten Element keine genaue Höhe hinzufügen. Andernfalls fügen Sie den anderen !important hinzu, zum Beispiel:

Körper{
Marge: 2 % 0 !wichtig;
Rand: 20px 0; /* IE6 lesbar */
}

9. Testen Sie frühzeitig und testen Sie oft. Vergessen Sie nicht, frühzeitig und oft zu testen, es sei denn, Ihr Level ist abgeschlossen. Andernfalls verbringen Sie möglicherweise mehr Zeit mit der Behebung von IE6-Problemen. Generell gilt: Wenn Ihre Website in IE6 und Firefox gut funktioniert, wird es wahrscheinlich keine größeren Probleme mit anderen Browsern geben.

10. Refaktorisieren Sie Ihren Code In vielen Fällen kann das Lösen eines Problems mehr Zeit in Anspruch nehmen als das Refaktorisieren Ihres Codes.

<<: Detaillierte Erklärung mehrerer Möglichkeiten zum Erstellen eines oberen linken Dreiecks in CSS

>>: Lösen Sie das Problem verschwindender Docker-Images

MySQL Community Server 5.7.19 Installationshandbuch (detailliert)

Beim Layout von Webseiten sollten Kompatibilitätsprobleme mit IE6 berücksichtigt werden

MySQL Community Server 5.7.19 Installationshandbuch (detailliert)

Zusammenfassung der Wissenspunkte der Komponente zur Leistungsoptimierung des ersten Vue-Bildschirms

JavaScript-Lösung für die Setinterval-Verzögerung um eine Sekunde

Die Bilder in HTML werden direkt durch base64-kodierte Strings ersetzt

HTML-Tabellen-Markup-Tutorial (38): Rahmenfarben-Attribut der Kopfzeile BORDERCOLOR

Detaillierte Erläuterung der Verwendung der MySQL-Verkettungsfunktion CONCAT

Grundkenntnisse in HTML: ein erstes Verständnis von Webseiten

Tipps zum Importieren von CSV-, Excel- oder SQL-Dateien in MySQL

So begrenzen Sie die Anzahl der Datensätze in einer Tabelle in MySQL

MySQL Master-Slave-Prinzip und Konfigurationsdetails

Artikel empfehlen

Fragen und Antworten: Unterschiede zwischen XML und HTML

Nginx-Stream-Konfigurationsproxy (Nginx TCP/UDP-Lastausgleich)

Instanzmethode für MySQL-String-Verkettung und Festlegen von Nullwerten

Detaillierte Erklärung der MySQL/Java-Server-Unterstützung für Emoji und Problemlösung

Webseiten in Schwarzweiß umwandeln (kompatibel mit Google, Firefox, IE und anderen Browsern)

So stellen Sie eine Verbindung zu einem Remoteserver her und übertragen Dateien über einen Jump-Server in Linux

Zusammenfassung von 6 Methoden zur Anzeige von Linux-Protokollen

Öffnen Sie den Windows-Server-Port (nehmen Sie als Beispiel Port 8080)

Javascript-Countdown-Eingabeaufforderungsfeld

So beheben Sie den 10060-Unknow-Fehler, wenn Navicat eine Remote-Verbindung zu MySQL herstellt

Analysieren Sie den Unterschied zwischen berechnet und beobachtet in Vue

Beispielcode für CSS3 zum Erzielen eines Bildlaufleisten-Verschönerungseffekts

Der MySQL-Server läuft mit der Option --read-only und kann diese Anweisung daher nicht ausführen.

JS implementiert ein einfaches Flipperspiel, bei dem Ziegelsteine zerschlagen werden müssen

Unbekannte Verwendung von Object.entries in JavaScript