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:

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:

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

CSS-Layout-Tutorial: So erreichen Sie eine vertikale Zentrierung

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

CSS-Layout-Tutorial: So erreichen Sie eine vertikale Zentrierung

Lösen Sie das MySQL 5.7.9 Version sql_mode=only_full_group_by Problem

Eine kurze Diskussion über verschiedene Situationen, in denen das Hinzufügen von Indizes zu MySQL nicht wirksam wird

So erstellen Sie eine lnmp-Umgebung im Docker

MySQL 8.0.11 Installationstutorial mit Bildern und Text

Beispiel für ein JavaScript-Meldungsfeld

CSS-Implementierungscode für horizontale und vertikale Fortschrittsbalken

Diagramm der Installationsschritte für MySQL 8.0.11 Community Green Edition für Windows

CSS und JS für eine romantische Meteorschauer-Animation

Was genau passiert im Hintergrund, wenn Sie eine URL eingeben?

Artikel empfehlen

Detailliertes Tutorial zum Abrufen der Oracle 11g-Imagekonfiguration über Docker

Stil-Trigger-Effekt des Webseiten-Eingabefelds

MySQL-Anmelde- und Beendigungsbefehlsformat

js, um eine einfache Produkt-Screening-Funktion zu erreichen

Detaillierte Analyse des HTTP-Statuscodes 502 des Dienstes nginx+php-fpm

Detaillierte Erläuterung der Transaktionsisolationsebenen in den MySql-Studiennotizen

Nginx+FastDFS zum Erstellen eines Image-Servers

Das Implementierungsprinzip des Zabbix-Sammelskripts zur dynamischen Ausführungsüberwachung

Tutorial zur gleichzeitigen Installation von Seurat2 und Seurat3 mit derselben Version von R unter Linux

Lösen Sie das Problem der Datensynchronisierung beim Scrollen und Liken von Vue-Seamless-Scroll

So entwickeln Sie eine Progressive Web App (PWA)

Erklärung zur Verwendung von „Ersetzen“ und „Ersetzen in“ in MySQL

Vue + ElementUI implementiert Paging-Funktion - MySQL-Daten

In diesem Artikel erfahren Sie mehr über NULL in MySQL

So handhaben Sie lange Daten bei der Anzeige in HTML