Wählen Sie eine Dropdown-Liste für Webseiten und ein Problem mit der Abdeckung der Div-Ebene aus.

Fragen zu Select-Elementen in HTML wurden an vielen Stellen gestellt. In einem aktuellen Projekt stieß ich auf zwei kleine Probleme mit Select-Elementen. Hier ist eine Zusammenfassung. Das erste ist bekannt: Die allgemeine schwebende Div-Ebene kann das Auswahlelement in IE6 nicht abdecken. Zunächst wird das folgende Beispiel bereitgestellt: Hinweis: Wenn Sie es unter FirFox und IE7 betrachten, wurden die Probleme mit ausgewählten Elementen in HTML an vielen Stellen angesprochen. In einem Projekt vor einiger Zeit stieß ich zufällig auf zwei kleine Probleme mit ausgewählten Elementen. Hier ist eine Zusammenfassung.
Verwandte Artikel: Die erste Lösung für das Problem, dass die Div-Ebene von der Flash-Ebene abgedeckt wird, ist die bekanntere: Die allgemeine schwebende Div-Ebene kann das Auswahlelement in IE6 nicht abdecken. Zunächst wird das folgende Beispiel gegeben:
Wählen Sie eine Dropdown-Liste für Webseiten und ein Problem mit der Abdeckung der Div-Ebene aus.

Hinweis: Wenn Sie es in FirFox und IE7 betrachten, sind die Ergebnisse dieselben: Die schwebenden Ebenen A, B und C können alle normal angezeigt werden, d. h. sie decken das darunter liegende Auswahlelement ab. In IE6 gibt es jedoch drei unterschiedliche Situationen: Die schwebende Ebene A ist immer noch normal. Der Hauptteil der schwebenden Ebene B deckt das Auswahlelement ab, aber der Rand der schwebenden Ebene kann das Auswahlelement nicht abdecken. Die schwebende Ebene 3 kann das Auswahlelement überhaupt nicht abdecken. Der Grund für dieses Phänomen ist, dass der Browser in IE6 das Auswahlelement als Element auf Fensterebene betrachtet. Zu diesem Zeitpunkt können Div oder andere normale Elemente das Auswahlelement nicht abdecken, egal wie hoch der Z-Index eingestellt ist. Die Auswahl kann jedoch von einem Iframe abgedeckt werden, das ebenfalls ein Element auf Fensterebene ist. So funktioniert es im obigen Beispiel. Die schwebende Schicht C ist nur eine schwebende Div-Schicht. Ich werde hier nicht darüber sprechen. Schauen wir uns die Struktur der schwebenden Schicht B direkt an:
<div class="containDiv" > <iframe class="maskIframe" ></iframe> <div class="mainDiv" >Floating-Ebene B</div> </div>
Verwenden Sie ein Div, um das eigentliche Inhalts-Div und ein Iframe-Element zusammenzufügen. Die entsprechenden Stile sind:
.containDiv{Position: absolute; oben: 140px; links: 60px; } .maskIframe{Position: absolute; links: -1px; oben: -1px; z-index: -1;Rand:1px durchgezogen #000;Höhe:50px;Breite:50px;_Höhe:48px;_Breite:48px;} .mainDiv{Hintergrund:#EBAC3B;Breite:50px;Höhe:50px;}
Die schwebende Ebene B verwendet iframe zur absoluten Positionierung in containDiv und setzt z-index: -1; und lässt dann mainDiv, das tatsächlich den Inhalt enthält, das iframe abdecken. Zu diesem Zeitpunkt kann das iframe das ausgewählte Element abdecken und bewirkt indirekt, dass mainDiv das ausgewählte Element abdeckt. Die schwebende Ebene B ist jedoch immer noch nicht perfekt. Der Grund dafür ist, dass der Rand der schwebenden Ebene B hier den Iframe-Rand verwendet. Der Iframe selbst kann die Auswahl abdecken, sein Rand jedoch nicht, sodass die Situation der schwebenden Ebene B auftritt.
Die schwebende Ebene A löst dieses Problem und erzielt den idealen Effekt. Sie ist im Grunde dasselbe wie die schwebende Ebene B, außer dass sie das Iframe oben, unten, links und rechts um 1 Pixel größer macht als das MainDiv und dem MainDiv dann einen Rahmen gibt. Auf diese Weise wird der Rahmen der schwebenden Ebene durch das MainDiv bereitgestellt und das gesamte MainDiv zusammen mit dem Rahmen befindet sich auf dem Iframe, sodass der ideale Effekt erzielt wird!
Das zweite Problem mit „select“ ist das Problem der dynamischen Generierung von Optionsoptionen im IE. Betrachtet man das Beispiel der zweiten Frage oben, können beim Klicken auf den Link (nur FF) dem Auswahlelement in FF drei Optionselemente hinzugefügt werden, im IE jedoch nicht; beim Klicken auf den Link (universell) können sowohl im IE als auch im FF drei Optionselemente zum Auswahlelement hinzugefügt werden. Der Grund dafür ist, dass der erste Link über das innerHTML-Attribut des Auswahlelements zum Optionselement hinzugefügt wird.
document.getElementById("addSelect").innerHTML = "ABC";
Dies funktioniert in FF einwandfrei, aber in IE können Sie diese Methode nicht verwenden, um dem Auswahlelement Optionsunterelemente hinzuzufügen. Stattdessen müssen Sie die Methode verwenden, die im zweiten Link bereitgestellt wird:
document.getElementById("addSelect").options.add(neue Option("A","A",false,true));

<<: So implementieren Sie den Nginx-Reverse-Proxy für mehrere Server

>>: JavaScript zur Implementierung eines einziehbaren sekundären Menüs

Wie CSS die Zeit des weißen Bildschirms während des ersten Ladens beeinflusst

Wählen Sie eine Dropdown-Liste für Webseiten und ein Problem mit der Abdeckung der Div-Ebene aus.

Wie CSS die Zeit des weißen Bildschirms während des ersten Ladens beeinflusst

Detaillierte Installation und Konfiguration von Subversion (SVN) unter Ubuntu

Docker Link realisiert die Containerverbindung

Optimierungsmethoden, wenn MySQL zu viel CPU beansprucht (unbedingt lesen)

Eine kurze Diskussion über MySQL-Backup und -Wiederherstellung für eine einzelne Tabelle

Fünf Möglichkeiten zum automatischen Seitensprung in HTML

Zwei Implementierungen des Front-End-Routings von Vue-Router

So verwenden Sie Cron-Jobs, um PHP regelmäßig unter Cpanel auszuführen

Problem beim doppelten Laden, wenn die Seite img src enthält

Der Unterschied zwischen HTML-Frame, Iframe und Frameset

Artikel empfehlen

Beispielcode zur Umsetzung des „Pluszeichen“-Effektes mit CSS

So installieren Sie Docker auf Ubuntu20.04 LTS

So beheben Sie den MySQL-Fehler 10061

So stellen Sie Redis in einer Linux-Umgebung bereit und installieren es in Docker

Beispiel für die Verwendung von Dockerfile zum Erstellen eines Nginx-Images

Natives JS zum Erzielen digitaler Tisch-Spezialeffekte

Was ist Makefile in Linux? Wie funktioniert es?

HeidiSQL-Tool zum Exportieren und Importieren von MySQL-Daten

Vue implementiert einen Countdown zwischen angegebenen Daten

Zusammenfassung der bei der Installation von Docker auf der Home-Version von Win10 aufgetretenen Probleme

Eine allgemeine Methode zur Implementierung eines unendlichen Textkarussells mit nativem CSS

JavaScript-Makrotasks und Mikrotasks

Implementierung der Lese-/Schreibtrennung und des Lastenausgleichs von MySQL basierend auf OneProxy

JavaScript BOM-Standortobjekt + Navigatorobjekt + Verlaufsobjekt

XHTML-Erste-Schritte-Tutorial: XHTML-Tags