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
Artikel empfehlen
Einführung in die Verwendung des Formulars „OnSubmit“ und des Eingabetyps „Bild“
Wenn hier ein <input type="image">...
Kurztipps für die Linux-Befehlszeile: So finden Sie eine Datei
Wir alle haben Dateien auf unseren Computern gesp...
Tiefgreifendes Verständnis von UID und GID in Docker-Containern
Standardmäßig werden Prozesse im Container mit Ro...
JavaScript imitiert den vollständigen Seitenimplementierungsprozess der offiziellen Website von Xiaomi Mall
Inhaltsverzeichnis 1. Homepage-Erstellung 1. Prod...
MySQL implementiert Protokollverwaltung, Sicherung und Wiederherstellung auf Unternehmensebene – praktisches Tutorial
Hintergrund Mit der Entwicklung des Geschäfts exp...
Implementierungsschritte zur Kapselung von Komponenten basierend auf React
Inhaltsverzeichnis Vorwort Wie kapselt Antd Kompo...
Lösung für den Fall, dass der Tomcat-Server tomcat7w.exe nicht öffnen kann
Beim Konfigurieren des Tomcat-Servers ist mir heu...
Natives JS zum Erzielen eines coolen Paging-Effekts
In diesem Artikel wird anhand eines Beispiels ein...
Einführung in die grundlegenden Konzepte und Technologien der Webentwicklung
Heute stellt dieser Artikel Anfängern einige grun...
Beispiele für den Import und Export von MySQL-Tabellendaten
Dieser Artikel beschreibt die Import- und Exportv...
Detaillierte Erläuterung des Grafikbeispiels für Vue-Überwachungsattribute
Inhaltsverzeichnis Was ist die Listener-Eigenscha...
Css3 realisiert nahtloses Scrollen und Anti-Shake
Frage Das nahtlose Scrollen von Bildern und Texte...
Nach dem Docker-Lauf ist der Status immer „Beendet“
füge -it hinzu docker run -it -name test -d nginx...
JavaScript-Implementierung eines Karussellbeispiels
In diesem Artikel wird der spezifische Code für J...
CSS HACK für IE6/IE7/IE8/IE9/FF (Zusammenfassung)
Seit ich die offizielle Version von IE8.0 install...