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:  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
Artikel empfehlen
Grundlegende MySQL-Tabellenabfragen – häufige Fehler beim Left-Join
Überblick Bei kleinen und mittelgroßen Projekten ...
Einige Methoden zur Optimierung der Abfragegeschwindigkeit bei der Verarbeitung großer Datenmengen durch MySQL
Bei den tatsächlichen Projekten, an denen ich tei...
Zusammenfassung der MySQL-Sperrwissenspunkte
Das Konzept des Schlosses ①. Im wirklichen Leben ...
Tutorial zur Verwendung von Profilen in MySQL
Was ist ein Profil? Wir können es verwenden, wenn...
CentOS verwendet expect, um Skripte und Befehle remote in Stapeln auszuführen
Manchmal müssen wir Server stapelweise bedienen, ...
Sortierung der technischen Hinweise zum Linux-Kernel-Gerätetreiber-Kernel-Debugging
/****************** * Kernel-Debugging-Technologi...
Videojs+Swiper realisiert Taobao-Produktdetailkarussell
In diesem Artikel wird der spezifische Code von v...
Der DOCTYPE-Modusauswahlmechanismus bekannter Browser
Dokumentumfang Dieser Artikel behandelt den Modus...
Detaillierte Erklärung, wie CocosCreator-Systemereignisse generiert und ausgelöst werden
Inhaltsverzeichnis Umfeld Zusammenfassung Modul F...
Installations-Tutorial für VMware Workstation 12 Pro Linux
Dieser Artikel zeichnet das Linux-Tutorial zur In...
So stellen Sie eine einzelne Datenbank oder Tabelle in MySQL wieder her und mögliche Fallstricke
Vorwort: Das am häufigsten verwendete logische My...
Vue simuliert die Warenkorb-Abrechnungsfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Einführung in den DOCTYPE-Typ
<br />Wir deklarieren DOCTYPE in HTML normal...
So starten Sie mehrere MySQL-Datenbanken auf einem Linux-Host
Lassen Sie uns heute darüber sprechen, wie Sie vi...
Detaillierte Erklärung zum Ändern des Stils von el-select: popper-append-to-body und popper-class
So ändern Sie den Stil der von elementUI bereitge...