Sélectionnez la liste déroulante de la page Web et la couche div couvrant la production de pages problématique_HTML/Xhtml_Web

Des questions sur l'élément select en HTML ont été soulevées à de nombreux endroits. Dans un projet il y a quelque temps, j'ai rencontré deux petits problèmes concernant l'élément select. Voici un résumé. Le premier est le problème le plus connu : la couche flottante générale div ne peut pas couvrir l'élément select sous IE6. Tout d'abord, l'exemple suivant est fourni : Remarque : Si vous l'affichez sous FireFox et IE7,
Des problèmes concernant l'élément select en HTML ont été soulevés à de nombreux endroits. Dans un projet il y a quelque temps, j'ai rencontré deux petits problèmes concernant l'élément select. Voici un résumé.
Articles connexes : Solutions au problème de la couche div recouverte par la couche flash
Le premier est le plus célèbre : la couche flottante générale div ne peut pas couvrir l'élément select sous IE6. Tout d’abord, l’exemple suivant est fourni :

Remarque : si vous le regardez sous FireFox et IE7, le résultat est le même : les couches flottantes A, B et C peuvent toutes être réalisées normalement, c'est-à-dire qu'elles couvrent l'élément de sélection ci-dessous. Mais sous IE6, il existe trois situations différentes. La couche flottante A est toujours normale : la partie principale de la couche flottante B recouvre partiellement l'élément sélectionné, mais la bordure du calque flottant ne peut pas couvrir l'élément flottant 3 ; élément du tout. La raison de ce phénomène est que sous IE6, le navigateur traite l'élément select comme un élément au niveau de la fenêtre. À ce stade, div ou d'autres éléments ordinaires ne peuvent pas couvrir l'élément select, quelle que soit la valeur de l'index z, mais il le fait. peut être utilisé en même temps. Couvrez la sélection pour l'iframe de l'élément au niveau de la fenêtre, comme indiqué dans l'exemple ci-dessus. La couche flottante C n'est qu'une couche flottante div. Je n'entrerai pas dans les détails ici. Regardons simplement la structure de la couche flottante B :

Couche flottante B

Utilisez un div pour regrouper le contenu réel requis et un élément iframe. Leurs styles correspondants sont :
.containDiv{position : absolue ; haut : 140 px ; gauche : 60 px ; .maskIframe{position : absolue ; gauche : -1px ; haut : -1px ; z-index : -1 ; bordure : 1px solide #000 ; hauteur : 50px ; largeur : 50px ;_hauteur : 48px ;_largeur : 48px ; .mainDiv{background:#EBAC3B;largeur:50px;hauteur:50px;}
La couche flottante B utilise l'iframe pour positionner de manière absolue le containDiv et définir le z-index: -1;, puis permet au mainDiv ci-dessous qui contient réellement le contenu de couvrir l'iframe. À ce stade, l'iframe peut couvrir la sélection. élément, et indirectement Le mainDiv couvre également l'élément select. Mais le calque flottant B n'est toujours pas parfait. La raison en est que la bordure du calque flottant B utilise ici une bordure iframe. L'iframe elle-même peut couvrir la sélection, mais sa bordure ne le peut pas, donc la situation du calque flottant B apparaît.
La couche flottante A résout ce problème et atteint l'idéal. C'est fondamentalement la même chose que la couche flottante B, sauf qu'elle rend l'iframe 1px plus grande que le haut, le bas, la gauche et la droite de la div principale, puis donne une bordure à la div principale. , de sorte que la couche flottante La bordure soit fournie par mainDiv, et l'ensemble de mainDiv et la bordure soient au-dessus de l'iframe, donc l'effet idéal est obtenu !
Le deuxième problème avec select est le problème de la génération dynamique d'options sous IE. En regardant l'exemple de la deuxième question ci-dessus, en cliquant sur le lien (FF uniquement), vous pouvez ajouter 3 éléments d'option à l'élément select sous FF, mais cela ne fonctionne pas sous IE en cliquant sur le lien (universel), IE et FF Vous pouvez ajouter 3 éléments d'option à l'élément de sélection ci-dessous. La raison en est que le premier lien est ajouté à l'élément option via l'attribut innerHTML de l'élément select.
document.getElementById("addSelect").innerHTML = "ABC";
Ce n'est pas un problème sous FF, mais sous IE, vous ne pouvez pas utiliser cette méthode pour ajouter des sous-éléments d'option à l'élément select. Vous devez plutôt utiliser la méthode fournie par le deuxième lien :
document.getElementById("addSelect").options.add(new Option("A","A",false,true));