Tipps zur Verwendung von DIV-Containern mit fester Höhe in IE6 und IE7

Tipps zur Verwendung von DIV-Containern mit fester Höhe in IE6 und IE7
Es gibt viele Unterschiede zwischen IE6 und IE7 in ihrer Interpretation von CSS. Heute sprechen wir über einen davon: die Höhe.
Beispiel:
Code kopieren
Der Code lautet wie folgt:
<div Stil="Höhe:50px">


Unter IE6: Wenn die Inhaltshöhe im DIV 50 Pixel nicht überschreitet, beträgt die Höhe des DIV 50 Pixel. Wenn sie den eingestellten Wert überschreitet, wird die Höhe mit dem Inhalt erweitert, was normalerweise als adaptive Höhe bezeichnet wird.
Unter IE7: Wenn die Höhe des Inhalts im DIV 50 Pixel nicht überschreitet, beträgt die Höhe des DIV 50 Pixel. Wenn der festgelegte Wert überschritten wird, bleibt die Höhe des DIV weiterhin auf 50 Pixel festgelegt, und der überschüssige Inhalt überschreitet das DIV und läuft über. Wenn sich unter dem DIV anderer Inhalt befindet, überlappt dieser den überlaufenden Inhalt.

Dies ist offensichtlich ein sehr wichtiger Punkt. Wenn er nicht beachtet wird, führt dies zu Seitenunordnung. Normalerweise gibt es zwei Möglichkeiten, dieses Problem zu lösen:

1. Konzentrieren Sie sich auf die Höhe: Legen Sie die Höhe des DIV auf 50 Pixel fest, verbergen Sie den zusätzlichen Inhalt und schreiben Sie das CSS für beide Browser wie folgt:
Code kopieren
Der Code lautet wie folgt:
<div Stil="Höhe:50px;Überlauf:versteckt">
overflow:hidden ist sehr wichtig, die Kompatibilität hängt davon ab

2. Inhaltsorientiert: Stellen Sie die minimale DIV-Höhe auf 50 Pixel ein. Wenn zu viel Inhalt vorhanden ist, passt sich die DIV-Höhe dem Inhalt an. Zu diesem Zeitpunkt ist CSS HACK erforderlich, um einige Kompatibilitätsverarbeitungen durchzuführen:
<div style="min-height:50px;_height:50px;">, min-height:50px Mindesthöhe, dies können IE7 und FF erkennen, _height:50px ist unterstrichen, damit es nur von IE6 erkannt wird.

<<:  Verwenden Sie CSS, um ein dreispaltiges adaptives Layout zu erreichen (feste Breite auf beiden Seiten, adaptiv in der Mitte)

>>:  Der neueste Linux-Installationsprozess von Tomcat8

Artikel empfehlen

Detaillierte Erläuterung der Deep Copy und Shallow Copy im JS-Variablenspeicher

Inhaltsverzeichnis Variabler Typ und Speicherplat...

Implementierung von Portalen und Fehlergrenzbehandlung in React

Inhaltsverzeichnis Portale Fehlergrenzenbehandlun...

So verwenden Sie residente Knoten für die Ebenenverwaltung in CocosCreator

CocosCreator-Version: 2.3.4 Die meisten Spiele ve...

Detaillierte Erläuterung der benutzerdefinierten Ereignisinhaltsverteilung von Vue

1. Dies ist etwas kompliziert zu verstehen. Ich h...

Natives JS zum Erzielen eines coolen Paging-Effekts

In diesem Artikel wird anhand eines Beispiels ein...

Detailliertes Tutorial zum Aufbau eines lokalen Ideenaktivierungsservers

Vorwort Der Blogger verwendet die Idea IDE. Da di...

Häufige Szenarien und Vermeidungsmethoden für Indexfehler in MySQL

Vorwort Ich habe zuvor viele ähnliche Artikel gel...

Erstellen Sie einen hochverfügbaren MySQL-Cluster mit Dual-VIP

Inhaltsverzeichnis 1. Projektbeschreibung: 2. Pro...

MySql legt die angegebenen Benutzerdatenbankansichtsabfrageberechtigungen fest

1. Neuen Benutzer anlegen: 1. Führen Sie eine SQL...

Detaillierte Erläuterung der Konfiguration und Serialisierung von Nest.js-Umgebungsvariablen

Eine kurze Beschreibung der Umgebungsvariablenkon...

Einfaches Setup von VMware ESXi6.7 (mit Bildern und Text)

1. Einführung in VMware vSphere VMware vSphere is...

Grundlegendes Lernprogramm zum Tabellen-Tag in HTML

Zusammensetzung der Tabellenbeschriftung Die Tabe...

Mysql setzt Boolesche Typoperationen

Mysql legt den Booleschen Typ fest 1. Tinyint-Typ...

Der Unterschied zwischen Docker Run und Start

Der Unterschied zwischen Ausführen und Starten in...

Sammlung gemeinsamer DIV-Attribute

1. Immobilienliste Code kopieren Der Code lautet w...