Wählen Sie die Dropdown-Liste „Webseite“ und die Div-Ebene aus, die das Problem_HTML/Xhtml_Webseitenproduktion abdeckt

An vielen Stellen wurden Fragen zum Select-Element in HTML gestellt. Vor einiger Zeit bin ich auf zwei kleine Probleme mit dem Select-Element gestoßen. Das erste ist das bekanntere Problem: Die allgemeine Div-Floating-Schicht kann das ausgewählte Element unter IE6 nicht abdecken. Zunächst wird das folgende Beispiel bereitgestellt: Hinweis: Wenn Sie es unter FireFox und IE7 anzeigen,
An vielen Stellen wurden in einem Projekt zwei kleine Probleme mit dem Select-Element festgestellt. Hier ist eine Zusammenfassung.
Ähnliche Artikel: Lösungen für das Problem, dass die Div-Schicht von der Flash-Schicht bedeckt wird
Die erste ist bekannter: Die allgemeine Div-Floating-Schicht kann das ausgewählte Element unter IE6 nicht abdecken. Zunächst wird das folgende Beispiel bereitgestellt:

Hinweis: Wenn Sie es unter FireFox und IE7 betrachten, ist das Ergebnis das gleiche: Die schwebenden Schichten A, B und C können alle normal realisiert werden, das heißt, sie decken das darunter liegende ausgewählte Element ab. Unter IE6 gibt es jedoch immer noch drei verschiedene Situationen: Der Hauptteil der schwebenden Schicht B deckt das ausgewählte Element teilweise ab, aber der Rand der schwebenden Schicht kann das ausgewählte Element nicht abdecken Element überhaupt. Der Grund für dieses Phänomen liegt darin, dass der Browser das SELECT-Element unter IE6 als Element auf Fensterebene behandelt. Zu diesem Zeitpunkt können div oder andere gewöhnliche Elemente das SELECT-Element nicht abdecken, egal wie hoch der Z-Index eingestellt ist kann gleichzeitig die Auswahl für den Iframe des Fensterebenenelements verwenden, wie im obigen Beispiel gezeigt. Die Floating-Schicht C ist nur eine Div-Floating-Schicht. Ich werde hier nicht auf Details eingehen. Schauen wir uns nur die Struktur der Floating-Schicht B an:

Schwimmschicht B

Verwenden Sie ein Div, um das tatsächlich erforderliche Inhalts-Div und ein Iframe-Element zusammenzufügen. Ihre entsprechenden Stile sind:
.containDiv{position: absolute; links: 60px; .maskIframe{position: absolute; links: -1px; z-index: -1;border:1px solid #000;height:50px;width:50px;_height:48px;_width:48px;} .mainDiv{background:#EBAC3B;width:50px;height:50px;}
Floating Layer B verwendet den Iframe, um das ContainDiv absolut zu positionieren und den Z-Index festzulegen: -1; und ermöglicht dann, dass das MainDiv darunter, das tatsächlich den Inhalt enthält, den IFrame abdeckt. Zu diesem Zeitpunkt kann der IFrame die Auswahl abdecken Element und indirekt Das mainDiv deckt auch das select-Element ab. Aber die schwebende Ebene B ist immer noch nicht perfekt. Der Grund dafür ist, dass der Rand der schwebenden Ebene B hier einen Iframe-Rahmen 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 erreicht das Ideal. Sie ist im Grunde dasselbe wie die schwebende Ebene B, außer dass sie den Iframe oben, unten, links und rechts um 1 Pixel größer macht und dem mainDiv dann einen Rand gibt , damit die schwebende Ebene Der Rand wird von mainDiv bereitgestellt, und das gesamte mainDiv und der Rand befinden sich oben auf dem Iframe, sodass der ideale Effekt erzielt wird!
Das zweite Problem bei select ist das Problem der dynamischen Generierung von Optionen unter IE. Wenn Sie sich das Beispiel der zweiten Frage oben ansehen, können Sie beim Klicken auf den (nur FF)-Link drei Optionselemente zum Auswahlelement unter FF hinzufügen, aber es funktioniert nicht unter IE, wenn Sie auf den (universellen) Link klicken. IE und FF Sie können dem Auswahlelement unten drei Optionselemente hinzufügen. Der Grund dafür ist, dass der erste Link dem Option-Element über das innerHTML-Attribut des Select-Elements hinzugefügt wird.
document.getElementById("addSelect").innerHTML = "ABC";
Dies ist unter FF kein Problem, aber unter IE können Sie diese Methode nicht verwenden, um Options-Unterelemente zum Select-Element hinzuzufügen. Stattdessen müssen Sie die Methode verwenden, die über den zweiten Link bereitgestellt wird:
document.getElementById("addSelect").options.add(new Option("A","A",false,true));