Die Fragen zu ausgewählten Elementen in HTML wurden an vielen Orten aufgeworfen, und vor einiger Zeit habe ich zwei kleine Fragen zu ausgewählten Elementen begegnet. Fassen wir sie hier zusammen. Das erste ist das berühmteste: Das allgemeine Problem, dass die Div -Floating -Schicht das Auswahlelement unter IE6 nicht abdecken kann. Zunächst wird das folgende Beispiel bereitgestellt: Hinweis: Wenn Sie es sich unter Firfox und IE7 ansehen
Die Fragen zu ausgewählten Elementen in HTML wurden an vielen Orten aufgeworfen, und vor einiger Zeit habe ich zwei kleine Fragen zu ausgewählten Elementen begegnet. Fassen wir sie hier zusammen.
Verwandte Artikel: Lösungen für das Problem der Div -Schicht, die von der Flash -Schicht abgedeckt wird
Das erste ist das berühmteste: Das allgemeine Problem, dass die Div -Floating -Schicht das Auswahlelement unter IE6 nicht abdecken kann. Zunächst wird das folgende Beispiel bereitgestellt:
HINWEIS: Wenn Sie sich sowohl unter Firfox als auch unter IE7 ansehen, ist das Ergebnis das gleiche: schwimmende Schichten A, B und C können eine normale Realität sein, dh das folgende Auswahlelement ist blockiert. Unter IE6 gibt es jedoch drei verschiedene Situationen, wobei die schwimmende Schicht A immer noch normal ist. Die schwimmende Schicht B der Hauptkörper bedeckt das Auswahlelement, aber der Rahmen der schwimmenden Schicht kann das Auswahlelement nicht abdecken. Die schwebende Schicht 3 kann das Element überhaupt nicht abdecken. Der Grund für dieses Phänomen ist, dass der Browser in IE6 das Element auf Fensterebene ausgewählt hat. Zu diesem Zeitpunkt können Div oder andere gewöhnliche Elemente das Auswahlelement nicht abdecken, egal wie hoch der Z-Index ist, aber der Auswahl kann durch einen Iframe blockiert werden, der auch ein Element auf Fensterebene ist. So macht das obige Beispiel. Die schwimmende Schicht C ist nur eine Div -Floating -Schicht. Ich werde hier nicht mehr darüber sprechen, sondern schauen Sie sich die Struktur der schwimmenden Schicht B an:
<div class = contentDiv> <iframe class = maskiframe> </iframe> <div class = mainDiv> schwimmende Schicht B </div> </div>
Verwenden Sie eine DIV, um das tatsächliche Inhaltsdiv und ein Iframe -Element zusammenzustellen, und der entsprechende Stil lautet:
.Containdiv {Position: absolut; Oben: 140px; Links: 60px; } .maskiframe {Position: absolut; links: -1px; Oben: -1px; Z -Index: -1; Rand: 1px Festkörper #000; Höhe: 50px; Breite: 50px; _height: 48px; _width: 48px;}. MainDiv {Hintergrund: #eBac3b; Breite: 50px; Höhe: 50px;}
Floating Layer B verwendet Iframe, um Z -Index absolut zu positionieren und festzulegen: -1; In containsDiv und dann ermöglicht dann das MainDIV, das den Inhalt wirklich den Iframe abdeckt. Zu diesem Zeitpunkt kann der Iframe das Auswahlelement abdecken und das MainDIV indirekt auch das Auswahlelement abdecken. Die schwimmende Schicht B ist jedoch immer noch unvollkommen, da der Iframe -Rand der schwimmenden Schicht B hier den Iframe -Rand verwendet. Der Iframe selbst kann die Auswahl abdecken, aber sein Rand kann nicht, daher tritt schwimmende Schicht B auf.
Die schwebende Schicht A löst dieses Problem und hat ideales Denken erreicht. Es ist im Grunde genommen das gleiche wie die schwimmende Schicht B, außer dass es den Iframe mehr als Maindiv, unten, links und rechts macht und dann den Maindiv -Rand gibt. Auf diese Weise wird die schwimmende Grenze von MainDIV bereitgestellt, und die gesamte Maindiv und die Grenze befinden sich auf dem Iframe, sodass der ideale Effekt erzielt wird!
Das zweite Problem mit Select ist das Problem der dynamischen Erzeugung Optionenoptionen unter dem IE. Siehe das Beispiel der obigen zweiten Frage. Wenn Sie auf den (begrenzten FF) -Link klicken, können Sie 3 Optionselemente zum Auswahlelement unter FF hinzufügen, es ist jedoch unter IE nicht möglich. Beim Klicken auf den (allgemeinen) Link können Sie 3 Optionselemente zum Auswählen von Element unter IE und FF hinzufügen. Der Grund dafür ist, dass der erste Link darin besteht, das Optionselement über das Innerhtml -Attribut des Auswahlelements hinzuzufügen.
document.getElementById (addSelect) .innerhtml = ABC;
In FF gibt es kein Problem, aber der IE kann durch diese Methode das Auswahlelement nicht mehr Option Elemente hinzufügen, aber die durch den zweite Link bereitgestellte Methode ist erforderlich:
document.getElementById (addSelect) .options.add (neue Option (a, a, false, true));