Select web page drop-down list and div layer covering problem

Questions about select elements in HTML have been raised in many places. In a recent project, I encountered two small problems about select elements. Here is a summary. The first one is the well-known one: the general div floating layer cannot cover the select element in IE6. First, the following example is provided: Note: If you look at it under FirFox and IE7, the problems about select elements in HTML have been raised in many places. In a project some time ago, I happened to encounter two small problems about select elements. Here is a summary.
Related articles: The first solution to the problem of the div layer being covered by the flash layer is the more famous one: the general div floating layer cannot cover the select element in IE6. First, the following example is provided:
Select web page drop-down list and div layer covering problem

Note: If you look at it in FirFox and IE7, the results are the same: floating layers A, B, and C can all be displayed normally, that is, they cover the select element below. However, in IE6, there are three different situations: floating layer A is still normal; the main body of floating layer B covers the select element, but the border of the floating layer cannot cover the select element; floating layer 3 cannot cover the select element at all. The reason for this phenomenon is that in IE6, the browser regards the select element as a window-level element. At this time, div or other ordinary elements cannot cover the select element no matter how high the z-index is set. However, the select can be covered by an iframe, which is also a window-level element. This is how the above example does it. Floating layer C is just a div floating layer. I won’t talk about it here. Let’s look at the structure of floating layer B directly:
<div class="containDiv" > <iframe class="maskIframe" ></iframe> <div class="mainDiv" >Floating layer B</div> </div>
Use a div to put the actual content div and an iframe element together. Their corresponding styles are:
.containDiv{position: absolute; top: 140px; left: 60px; } .maskIframe{position: absolute; left: -1px; top: -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 uses iframe to absolutely position in containDiv and sets z-index: -1;, and then allows mainDiv, which actually holds the content, to cover the iframe. At this time, the iframe can cover the select element, and indirectly makes mainDiv cover the select element. However, floating layer B is still not perfect. The reason is that the border of floating layer B here uses the iframe border. The iframe itself can cover the select, but its border cannot, so the floating layer B situation appears.
Floating layer A solves this problem and achieves the ideal effect. It is basically the same as floating layer B, except that it makes the iframe 1px more than the mainDiv in the top, bottom, left and right, and then gives the mainDiv a border. In this way, the border of the floating layer is provided by the mainDiv, and the entire mainDiv together with the border are on the iframe, so the ideal effect is achieved!
The second problem with select is the problem of dynamically generating option options in IE. Looking at the example of the second question above, when clicking the (FF only) link, three option elements can be added to the select element in FF, but not in IE; when clicking the (universal) link, three option elements can be added to the select element in both IE and FF. The reason is that the first link is added to the option element through the innerHTML attribute of the select element
document.getElementById("addSelect").innerHTML = "ABC";
This works fine in FF, but in IE, you cannot use this method to add option sub-elements to the select element. Instead, you need to use the method provided by the second link:
document.getElementById("addSelect").options.add(new Option("A","A",false,true));

<<: Example code for implementing the "plus sign" effect with CSS

>>: How to implement Nginx reverse proxy for multiple servers

jQuery implements form validation function

Select web page drop-down list and div layer covering problem

jQuery implements form validation function

Simplify complex website navigation

Example code for CSS columns to achieve two-end alignment layout

An article to deal with Mysql date and time functions

Solution to Linux CentOS 6.5 ifconfig cannot query IP

Specific use of the autoindex module in the Nginx Http module series

A brief discussion on Python's function knowledge

Tutorial on installing Ubuntu 1804 in VMware Workstation 15 Pro (with pictures and text)

Use the ip netns command in Linux to isolate the network port and configure the IP address

Detailed explanation of Vue-router nested routing

Recommend

A brief introduction to the usage of decimal type in MySQL

Detailed explanation of various usages of proxy_pass in nginx

How to create an Nginx server with Docker

Solution to the problem of invalid width setting for label and span

Three ways to avoid duplicate insertion of data in MySql

About the pitfall record of Vue3 transition animation

MySql 8.0.16-win64 Installation Tutorial

Detailed explanation of the time representation example of the Linux time subsystem

How to start multiple MySQL instances in CentOS 7.0 (mysql-5.7.21)

Ubuntu 20.04 sets a static IP address (including different versions)

MySQL Series 4 SQL Syntax

XHTML introductory tutorial: Web page Head and DTD

Vue3 encapsulates the magnifying glass effect component of Jingdong product details page

Why Nginx is better than Apache

MySQL quickly inserts 100 million test data