Lösung für den Fehler, dass IE6 select nicht durch div abgedeckt werden kann

Verwenden Sie div, um eine Maske zu erstellen oder ein Popup-Fenster zu simulieren. Wenn sich in IE6 jedoch ein Dropdown-Listenfeld-Auswahlelement unter dem div befindet, durchbricht das Dropdown-Listenfeld das div und wird auf dem div angezeigt. Dieses Problem tritt unabhängig vom Z-Indexwert auf. Das Problem kann an der Popup-Dropdown-Liste des Dropdown-Listensteuerelements liegen, wodurch die Höhe der Z-Achse außer Kontrolle gerät. Aber IE6 besitzt eine magische Logik: Div kann „Select“ nicht abdecken, Iframe jedoch schon und Div kann „Iframe“ abdecken. Die Lösung besteht also darin, ein Iframe-Element mit einer höheren Z-Achsenhöhe zu verwenden, um das Dropdown-Listenfeld-Steuerelement zu umschließen oder abzudecken und es so auf seine normale Z-Achsenhöhe zurückzusetzen!

Der HTML-Code lautet wie folgt:
HTML Quelltext

Code kopieren

Der Code lautet wie folgt:

<div id="acontainnerbox" class="aboxinitcss">
Hier sind viele Codes,
<iframe Klasse="ifhideselect" frameborder="0"></iframe>
</div>

Code kopieren

Der Code lautet wie folgt:

<div id="acontainnerbox" class="aboxinitcss">
Hier sind viele Codes,
<iframe Klasse="ifhideselect" frameborder="0"></iframe>
</div>

Der CSS-Code lautet wie folgt:
HTML Quelltext

Code kopieren

Der Code lautet wie folgt:

.aboxinitcss{
Position: absolut;
Rand oben: 0px;
Rand links: 0px;
Anzeige: keine;
Hintergrund:#FFF;
Rand: durchgezogen #CCC 1px;
Polsterung: 30px;
z-Index:9999;
Breite: 620px; Überlauf: versteckt;
}
.ifhideselect{
z-Index: -1;
Breite: 680px;
Höhe: 255px;
Position: absolut;
Rand: 0;
links: 0;
oben: 0;
}
.aboxinitcss{
Position: absolut;
Rand oben: 0px;
Rand links: 0px;
Anzeige: keine;
Hintergrund:#FFF;
Rand: durchgezogen #CCC 1px;
Polsterung: 30px;
z-Index:9999;
Breite: 620px; Überlauf: versteckt;
}
.ifhideselect{
z-Index: -1;
Breite: 680px;
Höhe: 255px;
Position: absolut;
Rand: 0;
links: 0;
oben: 0;
}

Dadurch wird dieser Fehler behoben.
Der Z-Index des Iframes muss auf eine negative Zahl gesetzt werden, sonst wird er nicht abgedeckt.

<<: Spezifische Verwendung des Stapelkontexts in CSS

>>: Ein Artikel, der Ihnen ein tiefes Verständnis von Mysql-Triggern vermittelt

Kennen Sie die häufigsten MySQL-Designfehler?

Lösung für den Fehler, dass IE6 select nicht durch div abgedeckt werden kann

Kennen Sie die häufigsten MySQL-Designfehler?

Sieben Prinzipien eines guten Designers (2): Farbgebrauch

Gemeinsame Überprüfung beider Vue-Felder zur Realisierung der Kennwortänderungsfunktion

Detaillierte Erklärung der Anwendung von CSS Sprite

Detaillierte Erläuterung der MySQL-Optimierung für Schreibprobleme im großen Maßstab

js-Speicherleckszenarien, wie man sie im Detail überwacht und analysiert

Methode zur Wiederherstellung von Betriebs- und Wartungsdaten der MySQL-Datenbank

So verwenden Sie den Vue-Filter

Der gesamte Prozess der Entwicklung eines Google-Plug-Ins mit vue+element

Was ist DNS-Prefetch? Frontend-Optimierung: DNS-Vorauflösung verbessert die Seitengeschwindigkeit

Artikel empfehlen

HTML-Versionsdeklaration DOCTYPE-Tag

Linux nutzt duale Netzwerkkartenbindung und Schraubendreherschnittstelle

HTML-Tabellen-Tag-Tutorial (45): Tabellen-Body-Tag

JavaScript zum Erzielen von Spezialeffekten beim Treppenrollen (jQuery-Implementierung)

MySQL-Startfehler beheben: FEHLER 2003 (HY000): Keine Verbindung zum MySQL-Server auf „localhost“ möglich (10061)

Grundlegende Einführung in Echarts: Allgemeine Konfiguration von Balkendiagrammen und Liniendiagrammen

Vorgehensweise bei der Installation einer virtuellen VMware Workstation-Maschine

MySQL-Kodierung utf8 und utf8mb4 utf8mb4_unicode_ci und utf8mb4_general_ci

So implementieren Sie adaptive Container mit gleichem Seitenverhältnis mit CSS

Eine kurze Einführung in die Abfrageeffizienz von MySQL-Speicherfeldtypen

Mit JS einen rotierenden Weihnachtsbaum in HTML implementieren

MySQL 8.0-Fehler Der Server hat eine für die Client-Lösung unbekannte Authentifizierungsmethode angefordert

Ein Artikel zum Lösen des Echarts-Kartenkarussell-Highlights

Detaillierte Einführung in Robots.txt

Einige Frontend-Grundlagen (HTML, CSS) aus der Praxis